Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

Ipad Problem Overview

I have some css menus on my site that expand with :hover (without js)

This works in a semi-broken way on iDevices, for example a tap will activate the :hover rule and expand the menu, but then tapping elsewhere doesn't remove the :hover. Also if there is a link inside the element that is :hover'ed, you have to tap twice to activate the link (first tap triggers :hover, second tap triggers link).

I've been able to make things work nicely on iphone by binding the touchstart event.

The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my touchstart events!

I know this is the problem because when I disable all the :hover rules manually in the css, mobile safari works great (but regular browsers obviously don't anymore).

Is there a way to dynamically "cancel" :hover rules for certain elements when the user is on mobile safari?

See and compare iOS behavior here: http://jsfiddle.net/74s35/3/ Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;

Ipad Solutions

Solution 1 - Ipad

I found that ":hover" is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element ":hover", while sometimes it drifts to other elements.

For the time being, I just have a "no-touch" class at body.

<body class="yui3-skin-sam no-touch">
   ...
</body>

And have all CSS rules with ":hover" below ".no-touch":

.no-touch my:hover{
   color: red;
}

Somewhere in the page, I have javascript to remove no-touch class from body.

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

This doesn't look perfect, but it works anyway.

Solution 2 - Ipad

:hover isn't the issue here. Safari for iOS follows a very odd rule. It fires mouseover and mousemove first; if anything is changed during these events, 'click' and related events don't get fired:

mouseenter and mouseleave appear to be included, though they're not specified in the chart.

If you modify anything as a result of these events, click events won't get fired. That includes something higher up in the DOM tree. For example, this will prevent single clicks from working on your website with jQuery:

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

Edit: For clarification, jQuery's hover event includes mouseenter and mouseleave. These will both prevent click if content is changed.

Solution 3 - Ipad

A better solution, without any JS, css class and viewport check: you can use Interaction Media Features (Media Queries Level 4)

Like this:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

iOS Safari supports it

More about: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

Solution 4 - Ipad

The browser feature detection library Modernizer includes a check for touch events.

It’s default behavior is to apply classes to your html element for each feature being detected. You can then use these classes to style your document.

If touch events are not enabled Modernizr can add a class of no-touch:

<html class="no-touch">

And then scope your hover styles with this class:

.no-touch a:hover { /* hover styles here */ }

You can download a custom Modernizr build to include as few or as many feature detections as you need.

Here's an example of some classes that may be applied:

<html class="js no-touch postmessage history multiplebgs
             boxshadow opacity cssanimations csscolumns cssgradients
             csstransforms csstransitions fontface localstorage sessionstorage
             svg inlinesvg no-blobbuilder blob bloburls download formdata">

Solution 5 - Ipad

Some devices (as others have said) have both touch and mouse events. The Microsoft Surface for example has a touch screen, a trackpad AND a stylus which actually raises hover events when it is hovered above the screen.

Any solution that disables :hover based on the presence of 'touch' events will also affect Surface users (and many other similar devices). Many new laptops are touch and will respond to touch events - so disabling hovering is a really bad practice.

This is a bug in Safari, there's absolutely no justification for this terrible behavior. I refuse to sabotage non iOS browsers because of a bug in iOS Safari which has apparently been there for years. I really hope they fix this for iOS8 next week but in the meantime....

My solution:

Some have suggested using Modernizr already, well Modernizr allows you to create your own tests. What I'm basically doing here is 'abstracting' the idea of a browser that supports :hover into a Modernizr test that I can use throughout my code without hardcoding if (iOS) throughout.

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

Then the css becomes something like this

html.workinghover .rollover:hover 
{
    // rollover css
}

Only on iOS will this test fail and disable rollover.

The best part of such abstraction is that if I find it breaks on a certain android or if it's fixed in iOS9 then I can just modify the test.

Solution 6 - Ipad

Adding the FastClick library to your page will cause all taps on a mobile device to be turned into click events (regardless of where the user clicks), so it should also fix the hover issue on mobile devices. I edited your fiddle as an example: http://jsfiddle.net/FvACN/8/.

Just include the fastclick.min.js lib on your page, and activate via:

FastClick.attach(document.body);

As a side benefit, it will also remove the annoying 300ms onClick delay that mobile devices suffer from.

There are a couple of minor consequences to using FastClick that may or may not matter for your site:

If you tap somewhere on the page, scroll up, scroll back down, and then release your finger on the exact same position that you initially placed it, FastClick will interpret that as a "click", even though it's obviously not. At least that's how it works in the version of FastClick that I'm currently using (1.0.0). Someone may have fixed the issue since that version.
FastClick removes the ability for someone to "double click".

Solution 7 - Ipad

There are basically three scenarios:

User only has a mouse/pointer device and can activate :hover
User only has a touchscreen, and can not activate :hover elements
User has both a touchscreen and a pointer device

The originally accepted answer works great if only the first two scenarios are possible, where a user has either pointer or touchscreen. This was common when the OP asked the question 4 years ago. Several users have pointed out that Windows 8 and Surface devices are making the third scenario more likely.

The iOS solution to the problem of not being able to hover on touchscreen devices (as detailed by @Zenexer) is clever, but can cause straightforward code to misbehave (as noted by the OP). Disabling hover only for touchscreen devices means that you will still need to code a touchscreen friendly alternative. Detecting when a user has both pointer and touchscreen further muddies the waters (as explained by @Simon_Weaver).

At this point, the safest solution is to avoid using :hover as the only way a user can interact with your website. Hover effects are a good way of indicating that a link or button is actionable, but a user should not be required to hover an element to perform an action on your website.

Re-thinking “hover” functionality with touchscreens in mind has a good discussion about alternative UX approaches. The solutions provided by the answer there include:

Replacing hover menus with direct actions (always visible links)
Replacing on-hover menus with on-tap menus
Moving large amounts of on-hover content into a separate page

Moving forward, this will probably be the best solution for all new projects. The accepted answer is probably the second best solution, but be sure to account for devices that also have pointer devices. Be careful not to eliminate functionality when a device has a touchscreen just to work around iOS's :hover hack.

Solution 8 - Ipad

The JQuery version in your .css use .no-touch .my-element:hover for all your hover rules include JQuery and the following script

function removeHoverState(){
	$("body").removeClass("no-touch");
}

Then in body tag add class="no-touch" ontouchstart="removeHoverState()"

as soon as the ontouchstart fires the class for all hover states is removed

Solution 9 - Ipad

Instead of only having hover effects when touch is not available I created a system for handling touch events and that has solved the problem for me. First, I defined an object for testing for "tap" (equivalent to "click") events.

touchTester = 
{
    touchStarted: false
   ,moveLimit:    5
   ,moveCount:    null
   ,isSupported:  'ontouchend' in document
   
   ,isTap: function(event)
   {
      if (!this.isSupported) {
         return true;
      }
      
      switch (event.originalEvent.type) {
         case 'touchstart':
            this.touchStarted = true;
            this.moveCount    = 0;
            return false;
         case 'touchmove':
            this.moveCount++;
            this.touchStarted = (this.moveCount <= this.moveLimit);
            return false;
         case 'touchend':
            var isTap         = this.touchStarted;
            this.touchStarted = false;
            return isTap;
         default:
            return true;
      }
   }
};

Then, in my event handler I do something like the following:

$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
            ,function handleClick(event) {
               if (!touchTester.isTap(event)) {
                  return true;
               }
               
               // touch was click or touch equivalent
               // nromal handling goes here.
            });

Solution 10 - Ipad

Thanks @Morgan Cheng for the answer, however I've slightly modified the JS function for getting the "touchstart" (code taken from @Timothy Perez answer), though, you need jQuery 1.7+ for this

  $(document).on({ 'touchstart' : function(){
      //do whatever you want here
    } });

Solution 11 - Ipad

Given the response provided by Zenexer, a pattern that requires no additional HTML tags is:

jQuery('a').on('mouseover', function(event) {
    event.preventDefault();
    // Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
    if (jQuery(event.target).children('.dropdown').is(':visible') {
        // Hide your dropdown nav here to unstick
    }
});

This method fires off the mouseover first, the click second.

Solution 12 - Ipad

I agree disabling hover for touch is the way to go.

However, to save yourself the trouble of re-writing your css, just wrap any :hover items in @supports not (-webkit-overflow-scrolling: touch) {}

.hover, .hover-iOS {
  display:inline-block;
  font-family:arial;
  background:red;
  color:white;
  padding:5px;
}
.hover:hover {
  cursor:pointer;
  background:green;
}

.hover-iOS {
  background:grey;
}

@supports not (-webkit-overflow-scrolling: touch) {
  .hover-iOS:hover {
    cursor:pointer;
    background:blue;
  }

}

<input type="text" class="hover" placeholder="Hover over me" />

<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />

Solution 13 - Ipad

For those with common use case of disabling :hover events on iOS Safari, the simplest way is to use a min-width media query for your :hover events which stays above the screen width of the devices you are avoiding. Example:

@media only screen and (min-width: 1024px) {
  .my-div:hover { // will only work on devices larger than iOS touch-enabled devices. Will still work on touch-enabled PCs etc.
    background-color: red;
  }
}

Solution 14 - Ipad

For someone still looking for a solution if none of the above worked,

Try this,

@media (hover: hover)
{
    .Link:hover
    {
        color:#00d8fe;
    }
}

This hover pseudo will only be applied for devices with pointers and works normal on touch devices with just .active classes.

Solution 15 - Ipad

Just look at the screen size....

@media (min-width: 550px) {
	.menu ul li:hover > ul {
    display: block;
}
}

Solution 16 - Ipad

heres the code you'll want to place it in

// a function to parse the user agent string; useful for 
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
    var pattern = new RegExp(vs, 'i');
    return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
    // iPad specific stuff here
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Christopher Camps	View Question on Stackoverflow
Solution 1 - Ipad	Morgan Cheng	View Answer on Stackoverflow
Solution 2 - Ipad	Zenexer	View Answer on Stackoverflow
Solution 3 - Ipad	Estevão Lucas	View Answer on Stackoverflow
Solution 4 - Ipad	Beau Smith	View Answer on Stackoverflow
Solution 5 - Ipad	Simon_Weaver	View Answer on Stackoverflow
Solution 6 - Ipad	Troy	View Answer on Stackoverflow
Solution 7 - Ipad	thirdender	View Answer on Stackoverflow
Solution 8 - Ipad	Greg	View Answer on Stackoverflow
Solution 9 - Ipad	donut	View Answer on Stackoverflow
Solution 10 - Ipad	3Gee	View Answer on Stackoverflow
Solution 11 - Ipad	veryphatic	View Answer on Stackoverflow
Solution 12 - Ipad	Jordan Young	View Answer on Stackoverflow
Solution 13 - Ipad	Brian Scramlin	View Answer on Stackoverflow
Solution 14 - Ipad	Appy Mango	View Answer on Stackoverflow
Solution 15 - Ipad	oeliewoep	View Answer on Stackoverflow
Solution 16 - Ipad	Luke	View Answer on Stackoverflow