double click / Mouse over / hover effekt

WordPress DK Forum » Temaer

double click / Mouse over / hover effekt

(6 indlæg) (2 voices)

Startet for 9 years siden af lassenmads
Seneste svar fra lassenmads
This topic is not a support question

Tags:

double click / hover effekt / mouse over / ios

lassenmads

Nyt medlem
Joined: jun '17
Posts:
Reputation:

Hej

Jeg har et problem med mit Lookbook"-theme. Når man besøger hjemmesiden fra en pc, og kører musen hen over billederne, så er der en "mouse-over-effekt". Når man besøger siden fra en telefon (iphone), så dukker denne "mouse-over-effekt" op ved første click på et af billederne, og man er så nødt til at clicke en gang mere for at komme til selve posten. Jeg kunne rigtig godt tænke mig at få slettet "mouse-over-effekten" så man kommer direkte til en post ved et enkelt click på telefonen. Jeg har søgt nettet tyndt for forskellige løsninger med custom css, men der er ikke noget der virker.

Er der nogen der har styr på hvor jeg skal slette/ændre code for at slippe af med denne effekt?

MVH Mads

Skrevet 9 years siden #
Danny Bahl

Supermedlem
Joined: maj '17
Posts:
Reputation:

Jeg tror du skal lede i PHP eller javascript koderne. Når den gør sådan på telefonen, er jeg ret sikker på at det ikke er CSS.

Men for en sikkerheds skyld, find CSS-filen (eller filerNE) til temaet, og søg på 'hover', 'active' og 'focus'.

Ved du hvordan du ser hvilke koder der hører til billederne?

Har du den rigtige hjemmeside? Hjemmesidens 7 facetter

Skrevet 9 years siden #
Danny Bahl

Supermedlem
Joined: maj '17
Posts:
Reputation:

Her kan du måske få nogle hints til hvad du skal lede efter:
https://codepen.io/fredryk/pen/xrqze
(effekterne virker også på mobilen)

Skrevet 9 years siden #
lassenmads

Nyt medlem
Joined: jun '17
Posts:
Reputation:

Hej Danny

Mange tak for linket... Jeg har ingen erfaring med at kode, så jeg sidder og prøver mig frem, for at se om jeg kan gennemskue sammenhængene. Når jeg tester linket på min telefon kan jeg se at det er lidt det samme problem: At hover effekten begynder når jeg trykker på billede-eksemplerne. Jeg er ude efter at få slettet funktionen, så man kommer direkte videre til "linket/posten", så det sidder jeg fortsat og undersøger.

MVH Mads

Skrevet 9 years siden #
Danny Bahl

Supermedlem
Joined: maj '17
Posts:
Reputation:

Hvis vi fjerner nedenstående kode på linket (anden kolonne), forsvinder effekten:
.show-first:hover img {
transform: scale(1.2);
}
.show-first:hover .mask {
opacity: 1;
}
.show-first:hover h2,
.show-first:hover p,
.show-first:hover a.info {
opacity: 1;
}
.show-first:hover p {
transition-delay: 0.1s;
}
.show-first:hover a.info {
transition-delay: 0.2s;
}

Nøgleordet er 'hover'. Find den kode der passer til dit billede, hvor der står 'hover' efter.
Luk den inde med /* og */
Men du skal finde koden for alle de elementer der vises (på linket: img, mask, h2, p, a.info).

Denne kode vises: .dit-billede {display:block;}
Denne kode vises ikke: /* .dit-billede {display:block;} */
På den måde sletter du ikke noget før du er helt sikker på at det er det rigtige.

Hjælper det?

Skrevet 9 years siden #
lassenmads

Nyt medlem
Joined: jun '17
Posts:
Reputation:

Hej Danny

Mange tak for din udførlige beskrivelse! Det sætter jeg virkelig pris på. Nu vil jeg bruge de næste par dage på at lede efter alle steder hvor jeg skal ændre i koden :-). Mange tak

Skrevet 9 years siden #

RSS feed for this topic

Svar

Du skal være logget ind for at skrive.