Question

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.

Answer 1

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!