Hover Behavior on Desktop vs iPad

问题:

I've built a menu that uses plain CSS and the :hover pseudo-class to display the menu. I tested the behavour on an iPad and see that the hover doesn't disappear - not even by clicking somewhere else.

I already searched the Internet for solutions, but couldn't find anything useful.

Is there a way to let the hover disappear when I click somewhere else on the page on iPad?

回答1:

I know another way to do it (but I didn't think it's much better).

To enabled css .hover effect you should add empty onclick to the element:

<div class="hoverable" onclick="">...</div>

Hover effect will work when you touch element, but didn't work when you touch-and-hold it. And I didn't test it on android devices. But it's work on ipad (mobile chrome and safari).

P.S. Also I recomend you add css style below for all elements, wich user may touch or touch-and-hold:

-webkit-user-select: none;

This option turns off Cut/Copy/Paste dialog with element. And do not use it for all document.

回答2:

Avoid relying on :hover

Relying on :hover limits the options on mobile devices. There's no way in JavaScript or jQuery to turn off the :hover state of an element.

As an alternative, you could add and remove a .hover class using a combination of mouse events and touch events. If necessary, don't add the mouse events if you detect support for touch events.

Here's a JSFiddle Demo with two hover menus. To run it on a mobile device, use this standalone version of the demo. The first menu uses the :hover pseudo-element, and the second one uses a .hover class.

On desktop browsers, the two menus behave the same. But for touch devices, @ErwaySoftware's suggestion was applied to the second menu: If you touch the menu item a second time on a touch device, the dropdown disappears. Of course, this is only appropriate if the menu item itself is not a functional hyperlink (if the only purpose it serves is to open the dropdown).

jQuery

// Mouse events
$('.menu > li').on('mouseover', function(){
    $(this).addClass('hover');
});
$('.menu > li').on('mouseout', function(){
    $(this).removeClass('hover');
});

// Touch events
$('.menu > li > a').on('touchend', function(){
    $(this).parent().toggleClass('hover');
});

Be sure to test on Android as well, before proceeding very far with any solution.

Mobile first

The cleanest and easiest approach may be to avoid relying on hover states when supporting mobile devices, and instead rely on clicks/touches to make the menus appear and disappear. In other words, build for mobile first, and then figure out how to make it work on desktop browsers (instead of the other way around).

回答3:

Here is my work around below. I am adding class 'clicked' which has the styling of the button's original class but also with !important appended...(see below).

$('#your_button').click(function()
{
    // Removing the old class if there was one
    $(this).removeClass('clicked');
    // Adding clicked class
    $(this).addClass('clicked');
    // DO THE REST OF YOUR BUTTON CODE HERE
    return false;
});

#your_button{ background: #ff0000; color:#fff } 
#your_button:hover{ background: #88888; color:#fff } 
#your_button.clicked{ background: #ff0000 !important; color:#fff !important; }