Fixing the Hover event on the iPad/iPhone/iPod

Note: This information may now be out of date. It was published in 2010!

In truth it’s not a fix as the iPad doesn’t have the ability to hover.

Apple has developed extra events to replace hover on it’s mobile touch devices. I’ve recently been working a lot on the iPad and came across the problem of hovered navigation not showing up. It’s a css :hover event that fires through a CSS selector on an <a> element with no href attribute.

To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate and iPad hover event.

If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:



if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });




    $(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });


}

	


	
	







			

			10 thoughts on “Fixing the Hover event on the iPad/iPhone/iPod”		


		
		
    
					
  1. 
			

    2. 
		
  2. 
			

    3. 
		
  3. 
			

    4. 
		
  4. 
			
    
				

				
    
					
    Hey thanks, this works well.  FYI, your page truncates your code block (FF 3.6.4) so I had to show source to get all the code.
    
				
    

							
    

    5. 
		
  5. 
			
    
				

				
    
					
    Congratulation, you fixed in on ipads and iphones and left every other device on earth without working version :) 
    

    Proper way to do it is with touch detection… check Modernizr
    
				
    

							
    

    6. 
		
  6. 
			

    7. 
		
  7. 
			
    
				

				
    
					
    Hi, what i did was to add classes to all of my hover elements which were making problems toggle out the hover effect (my menus stayed open even when i click out)
    

    example html:
    

    

    here is how i fixed my problems:
    

    $(“div”).on(‘hover’, function(e){
    
//alert(e.target.nodeName);
    
if(!$(e.target).hasClass(‘ipad-fix’)){}
    
});
    

    Had performance problems with the  .on(‘touchstart’)
    

    Hope it may help
    
				
    

							
    

    8. 
		
  8. 
			

    9. 
		
  9. 
			

    10. 
		
  10. 
			

    11. 
		


		
	
			
Comments are closed.