Re: no hover for mobile

Garrett Smith skrev:
> Hover for touch events causes problems in some cases. Because there's
> no finger above the event, the program must account for that and use
> "click" to trigger the action. But when the user touches the element,
> hover fires, and if that hover triggers a new state, then click event
> won't fire.
>
> So we want to stop hover from firing when it's not a real "move the
> cursor onto the element" hover but instead a "user touched this
> element, fire hover first" pseudo-hover.
>
> There should be a way to suppress hover for finger gesture, so when
> the user touches the element, that the selector doesn't match and the
> hover effect is suppressed. If there was a :touch-hover selector to
> discriminate and weed out those faux-hover impostors, then it would be
> used like this:—
>
> .infobox:hover:not(:touch-hover) > .captionText {
>   opacity: 1;
> }
>
> See more:—
> https://duckduckgo.com/?q=suppress+hover+for+mobile&t=ffab&ia=qa
>
> The advice on the top-ranked SO answer for that requires javascript to
> add non-bubbling mouseenter and mouseleave event handlers. I suppose
> you could use capturing listeners for event delegation strategies, and
> calls target.matches() in the callback, each time it callback fires
> but that's ugly, and doesn't play well with the original design of
> mouseenter/mouseleave (these were originally IE events, and as such,
> had no capture phase). Ugly, so I didn't even bother testing it.
>
> Another common strategy is to use a min-width media query to detect
> non-mobile (> 800px) and then put the :hover inside that; a common bad
> inference for this problem. More on SO…
> http://stackoverflow.com/search?q=hover+min-device-width Easy, dirty…
> We did it.
>
> But don't be confused by the starkly different hover() method that
> jQuery adds to the current state of :hover; jQuery is not a web
> standard http://api.jquery.com/hover/
>
> Thank you,
Developers should be using media queries to detect that the device
doesn't support hover. They can then adapt their content to use
alternative input methods.

Received on Wednesday, 16 December 2015 19:07:24 UTC