How To: iOS and CSS Hover Events

Mobile devices have a tough time handling css-based hover events (*:hover) due to the simple fact that iPhones, iPads, and Android devices use touch-based inputs where hovering is pretty much impossible. This proves to be problematic for elements that rely on hover events for usability, such as pure css drop-down menus. Replacing the menu with a JS-based method would bypass this issue but in some cases, that may be tough or impossible to do, especially when compared to this easy workaround.

For Android devices, the css hover event is activated simply by tapping the element that would otherwise be hovered over and, voila, the hidden menu is instantiated and you can move along to a child page. But iOS-based devices, such as the iPhone, iPod Touch and iPad, require a bit more coaxing to get the dropdown to show up.

iOS will not recognize the hover event class but will emulate the manner through which Android handles hover event classes (click-to-reveal) through an instance of a click event listener aimed at the head of the dropdown list (the word, when hovered/clicked, drops down the menu). Add the following code to the document.ready portion of your jQuery script in the site’s global header (assuming the dropdown appears on every page like a typical navigation menu).

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".class li a").click(function(){  // Update class to point at the head of the list
});
}

If you aren’t yet using jQuery on your site, the following script includes the jQuery core and the code within document.ready and will resolve the issue with a simple copy and paste. Just be sure to update the class the script points to.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".class li a").click(function(){  // Update class to point at the head of the list
});

}

});

</script>

One caveat you will have to contend with is the fact that if the list head links to another page, tapping it will take you to that page. You can work around this by adding a carrot-arrow to the right of the menu item and point the script at that class. But, you will need to make sure the carrot is large enough so that users will be able to click it without accidentally tapping the link to its left, and, if its close enough, to its right.


Sources :

Fixing the Hover Event on the iPad/iPhone/iPod: http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
Free Css Dropdown Menu with iPhone Quick Tip: http://www.justtwonerds.com/2010/02/24/free-css-dropdown-menu-with-iphone-quick-tip/

  • Stephane Koenig

    Thanks for the post.

    Can also detect a touch device via:

    var is_touch_device = ‘ontouchstart’ in document.documentElement;

    Then make appropriate js adjustments to event handlers.

    oh and for the future… ‘carrot’ should be ‘caret’.

  • Pingback: issues on iPad - The RadioReference.com Forums

  • http://www.facebook.com/people/Spencer-Morris/578096597 Spencer Morris

    Thank you very much, I was looking all over for a this. 

  • Jason Tinder

    You are freaking awesome. I just had to tweak the class a little bit and wham! it’s working on my ipad!

  • http://profile.yahoo.com/QGULJGDLU3WGF6ZT27KSH34FY4 Chrissy

    Hi there, 
    to someone who knows basic css and xhtml – how do you “just” Update class to point at the head of the list?

    I appreciate your time and the article! 

    c

    • http://niteodesign.com/ Blake Petersen

      Hi Chrissy, 

      In line 09 of the 2nd code snippet you’ll see that the click function is referencing an anchor tag within a list item within a class called “class”. If you update this class to reference the link you are trying to fix, it should work. 

      So if you have a navigation menu with a class defined as “nav”, you would update the snippet to say “.nav li a” or “.nav a”. Of if you have the link defined as a class explicitly, a.class or .class should work fine.
      Let me know if this helps, thanks!

      • http://profile.yahoo.com/QGULJGDLU3WGF6ZT27KSH34FY4 Chrissy

        Hi Blake,

        Thanks I ended up using this: accordion>li
        (my class was called accordian- as it was an accordian type of drop down hover menu)

        You probably already know this.. but since I don’t have an ipad I was constantly going to the store or checking on other people’s devices- but in fact here is an online simulator: http://ipadpeek.com/

        Thanks for your post!

        chrissy

        • Mark Hetherington

          ipadpeek.com is just using an iframe in your existing browser. It does not correctly simulate the hover/touch behaviour of an ipad (unless you actually run it on an ipad!). The only accurate emulator/simulator is in the ipad SDK, and you can only run that on a Mac (thanks for the third line forcing Apple!)

  • http://twitter.com/lolmaus Andrey Mikhaylov

    Thank you! ^_^

  • Pingback: Handling css :hover on iPad « Terkildsen's Blog

  • AndyHanger

    The click function does not actually do anything (because its empty). Is the trick to simply add a click event so the ‘hover event’ is triggered as well? I can see that by simply adding this empty function, ipad does start behaving slightly better but am not sure what the reason behind it is.

  • http://www.facebook.com/profile.php?id=100003818657343 Maurice Foulon

    I try to insert the given code into the “document.ready” section, but searching in the jquery.js file I can’t find a section named document.ready. Where do I have to put this code exactly in the file?