Block :hover on link for iPad

I have a page which has sublinks having CSS as;

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

Now my question is on the iPad, the :hover styles get applied....So is there any way by which I can block them on the iPad

i.e. to say the iPad should see the CSS as;

#leftNav .searchBySub {...} 
#leftNav .searchBySubClicked {...}

I cannot just delete the :hover from the CSS, because the same CSS is used on both the desktop and the iPad.

I have already tried most of the basic things like

a[i].ontouchstart=function(e){  开发者_Python百科
e.stopPropagation();                                                  
e.preventDefault();                  
return false;
}    

As Phil said, "Check for mobile OS and include a different stylesheet accordingly."

You can apply different stylesheet for different browsers.