You could just assume that anything with a screen smaller than 800 pixels must be a tablet or phone, and not use hover effects. So even if the "screen" or "handheld" part is ignored the "max-width" will do the trick for you.
I won't bore you with the details unless necessary - I'm not even sure that's the right approach to take if anyone has a simpler fix, I'm all ears.Įdit: This can be reproduced with bog-standard CSS :hover, but here's a quick repro for reference. I already tried hooking the touchstart, touchmove, and touchend events and calling preventDefault() on all of them, which does suppress the "invisible mouse cursor" some of the time but if I tap rapidly back and forth between two different elements, after a few taps it will start moving the "mouse cursor" and lighting up the hover effects anyway - it's like my preventDefault isn't always honored. I'm not interested in the device, I'm interested in how it's currently being used: mouse or touchscreen. The same device could have both a touchscreen and a mouse (maybe not so common today, but much more so in the future). In case someone was thinking of suggesting it, I don't want to use user-agent sniffing. How can I get the hover effects when I'm using the mouse, but suppress them when I'm using the touchscreen? The problem is, when I tap something on the tablet, the browser evidently has some kind of "invisible mouse cursor" that it moves to the location I tapped, and then leaves it there - so the thing I just tapped lights up with a hover effect until I tap something else. When it's being visited from a desktop, I want the clickable areas of the screen to light up with :hover effects (different background color, etc.) With a tablet, there's no mouse, so I don't want any hover effects. I'm writing a Web site that's meant to be used from both desktops and tablets.
0 kommentar(er)
