Question

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 class 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));
            });

Answer 1

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.