Re: no hover for mobile

On Wed, Dec 16, 2015 at 11:06 AM, Henrik Andersson
<henke@henke37.cjb.net> wrote:
> 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.

In particular, the (hover) media feature:
<https://drafts.csswg.org/mediaqueries/#hover>

(hover: hover) catches only devices with "real" hover.  Those that
trigger hover on a long press, or on a click, will respond to (hover:
on-demand).

~TJ

Received on Wednesday, 16 December 2015 19:21:36 UTC