title: CSS issue on iPad
body: <p>I have a very simple <code>CSS</code> related question on iPad.
  I have a set of sublinks each defined in CSS as;</p>
  
  <pre><code>#leftNav .searchBySub {...}
  #leftNav a.searchBySub:hover {...}
  #leftNav .searchBySubClicked {...}
  </code></pre>
  
  <p>And I have a <code>JS</code> where I have defined</p>
  
  <pre><code>$("#leftNav  a.searchBySub").live("touchstart",function(){...}
  $("#leftNav  a.searchBySub").live("click",function(){...}
  </code></pre>
  
  <p>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 ?</p>
  
  <p>Please read the question carefully before making any simple/basic suggestions, as I have already tried the basic fixes..</p>
  
  <p>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..</p>
  
  <p>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)</p>
  
  <p>So my main question is how do I override the :hover state when the link is clicked ?</p>
  
  <p>Updated ...</p>
  
  <p>Below is the code I have tried;</p>
  
  <pre><code>    $("#leftNav  a.searchBySub").live("touchstart",function(){
                  var a=document.getElementsByClassName("searchBySub");                 
                  for(var i=0;i&lt;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));
              });
  </code></pre>