I have some sublinks for a page viewed on the iPad...Now when I click on any of those links, I want the corresponding link to be active and also prevent the hover state from any of the links

I have tried

$("#leftNav  a").mouseleave(); 
$("#leftNav  a").mouseout(); 
$("#leftNav  a").trigger("mouseout"); 
$("#leftNav  a").trigger("mouseleave");

I have also tried

var a=document.getElementsByClassName("searchBySub");                 
            for(var i=0;i<a.length;i++)                 
            {                         
            a[i].ontouchstart=function(e){
            console.log("ontouchstart5");
            e.preventDefault(); 
            return false;}                 
            }

Before you say, there is no hover on iPad, I am aware of that....But it does indeed apply the :hover styles as per;

When the user focuses on an element by single-tapping it, the :hover styles are applied and the mouseover, mousemove, mousedown, mouseup and click events fire (always; and in that order).

So question is how do I prevent the hover state on some links, only for the iPad ? I cannot remove the :hover definition from the CSS as the same CSS is also used for desktop.

I have some sublinks for a page viewed on the iPad...Now when I click on any of those links, I want the corresponding link to be active and also prevent the hover state from any of the links

I have tried

$("#leftNav  a").mouseleave(); 
$("#leftNav  a").mouseout(); 
$("#leftNav  a").trigger("mouseout"); 
$("#leftNav  a").trigger("mouseleave");

I have also tried

var a=document.getElementsByClassName("searchBySub");                 
            for(var i=0;i<a.length;i++)                 
            {                         
            a[i].ontouchstart=function(e){
            console.log("ontouchstart5");
            e.preventDefault(); 
            return false;}                 
            }

Before you say, there is no hover on iPad, I am aware of that....But it does indeed apply the :hover styles as per;

When the user focuses on an element by single-tapping it, the :hover styles are applied and the mouseover, mousemove, mousedown, mouseup and click events fire (always; and in that order).

So question is how do I prevent the hover state on some links, only for the iPad ? I cannot remove the :hover definition from the CSS as the same CSS is also used for desktop.

• javascript
• jquery
• css
• ipad
• mobile-safari

3 Answers 3

You can use CSS media queries to set a stylesheet specifically for the iPad and override your :hover definitions from earlier:

<link rel="stylesheet" href="#" media="only screen and (device-width: 768px)" />

I assume that for the iPad 2 you will need another media query with double the device-width.

Note: Not tested

First off create a function for detect if the user is using iPad. Like so:

$.isiPad = function(){
  return (navigator.platform.indexOf("iPad") != -1);
}

remove hoovering class on all links if using iPad:

$(document).ready(function(){
   if($.isiPad())
   {
     $("a").hover(function(){
        $(this).addClass('your_a_class_when_not_hoovering');
     });
   }
});

If you only want to apply this on some links you culd do this:

 $(document).ready(function(){
   var apply_to_links = ['link_one_class_or_id','link_two_class_or_id']

  if($.isiPad())
   {
     $.each(apply_to_links,function(){
       $(this).hover(function(){
        $(this).addClass('your_a_class_when_not_hoovering');
       });
     })
   }
});

Like i said its not tested but ill think you get the point. Hope it helps!

Don't use :hover in the situations where its a problem. Use a class ('.hover') and set that class on .. hover

$(document).ready(function(){
   $("a").hover(function(){
      $(this).addClass('hover');
   }, function(){
     $(this).removeClass('hover');
});

as you noted, that doesnt work on an ipad, which is exactly what you want :-)