no hover for mobile

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,
-- 
Garrett
@xkit
ChordCycles.wordpress.com
garretts.github.io
personx.tumblr.com

Received on Wednesday, 16 December 2015 18:52:47 UTC