CSS issue on iPad

I have a very simple CSS related question on iPad. I have a set of sublinks each defined in CSS as;

#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

And I have a JS where I have defined

$("#leftNav  a.searchBySub").live("touchstart",function(){...}
$("#leftNav  a.searchBySub").live("click",function(){...}

Now my question is when I click on any of the sublinks on the iPad, why does it apply the :hover state CSS to it ? Also can I change that behavior somehow ?

Please read the question carefully before making any simple/basic suggestions, as I have already tried the basic fixes..

Also before you say, there is no hover event on the iPad, I am aware of that, but in my case, it does apply the :hover state clas开发者_开发技巧s when the link is clicked..

I know you might say just remove the :hover definition from the CSS, but unfortunately I cannot do that, as the same CSS is used by the desktop browsers as well (and even with media queries, it does not help)

So my main question is how do I override the :hover state when the link is clicked ?

Updated ...

Below is the code I have tried;

    $("#leftNav  a.searchBySub").live("touchstart",function(){
                var a=document.getElementsByClassName("searchBySub");                 
                for(var i=0;i<a.length;i++)                 
                {                         
                a[i].ontouchstart=function(e){
 window.location=this.getAttribute("href");
                console.log("ontouchstart2");
                e.stopPropagation();                                 
                e.preventDefault(); 
                return false;}                 
                }
                $("#leftNav  a.searchBySub").removeClass("searchBySubClick");
                $(this).addClass("searchBySubClick");
                clickEvent($(this));
            });

Safari mobiles handles the event on a particular order: when you press then release screen here is what happens:

ontouchstart - onmouseover/:hover - mousedown - mouseup - click/:active

Notice that onmouseout (end of the :hover state) won't be called unless you click elsewhere. Took me a while to figure that out.

As a workaround you can use this kind of code to trigger your links before the onmouseover event occurs.

        function ipadLinksHack()//Call it onload
        {
                var a=document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++)
                {
                        //Note to self: ontouchstart and not onclick! :)
                        a[i].ontouchstart=function(e)
                        {
                                window.location=this.getAttribute("href");
                                e.stopPropagation();
                                e.preventDefault();
                                return false;//Prevents the link default behavior
                        }
                }
        }

Remark: you can also use this snippet to prevent the opening of safari when you're in "standalone mode" (aka webapp) and click on links. That was the main purpose of this function. Also, reading the event handling guide on the official doc might help.

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 :hover is applied even on iOS. Not sure if iOS supports :focus (or maybe :active), but you could use that one to 'undo' the changes made by :hover.

Or use JS to call .blur() (untested).

Have a look about the document.styleSheets[0].deleteRule() function, and simply delete every rule containing ":hover" relative to a links. Here is some doc and some example of usage.

Be careful as pseudo element scripting seems unreliable on most browsers, so just loop through the stylesheet and delete "a:hover" rules.