Kako iskljuciti hover za touch uredjaje

Programiranje
1

Pozdrav!
Kao sto naslov kaze, zanima me ako neko zna kako da iskljucim hover za touch uredjaje. Radi se o Grid pluginu za objave na WP.
Kada korisnik hovera preko objave u tom gridu, featured slika dobije opacity: 1;
Kad se pregledava objava preko desktopa, i kad mouseom hoveras dobijes normalan efekat i jednim klikom otvara objavu, ali kad preko npr mobitela korisnik mora 2 puta da klikne da bi otvorio objavu.
Pokusao sam na vise nacina i preko CSS-a da sredim i pomocu JS ali nisam uspio nista napraviti.

2

Možda da ovako pokušaš, ubaciš JS da provjeriš jeli uređaj na no-touch:

document.body.className += (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');

To će u body tag dodati klasu touch ili no-touch.

Onda hover style dodaš samo kad body element ima klasu touch:

.no-touch element:hover { ... }

EDIT: Oprosti, napisao sam kad body ima klasu touch, ali zapravo ti hover treba samo kad ima klasu no-touch. Isprika

3 
@media only screen and (max-width: 768px) {
.grid-post-item:hover {
    opacity: 0;
    filter: alpha(opacity=0);
}}

Uspio sam preko ovoga, samo ne znam jesam li sa ovim pokrio sve touch uređaje

4

Išao si po širini viewporta. Ovo će pokriti dosta touch uređaja ali neće sve. Nije loše rješenje i često se koristi, mana je što neće raditi za neke mobitele i većinu tableta kad su u rotirani po široj strani (landscape). Ja bih digao max-width: 1024px, jer je neznatan broj desktop uređaja koji prikazuju na ovoj rezoluciji a pomoći će za tablete

5

Ahaa, evo preko chromovih dev toolova sam primjetio da ovo ne vrijedi za iPad Pro, sa 1024px radi kako treba.
Ma svakako prema mojim statistikama 95-97% korisnika koristi mobitele i tablete za pristup stranici dok su ostali desktop, tako da ovoj vecoj skupini treba praviti bolji korisnicki dozivljaj.
Hvala Igore :+1:

1 Like