Kako iskljuciti hover za touch uredjaje

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.

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

@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

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

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

Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Profit Monkey