My webpage contains sublinks with CSS properties as follows:
#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}
However, I have observed that on the iPad, the :hover styles are being applied. Is there a way to prevent this behavior specifically on the iPad?
In other words, I want the CSS on the iPad to appear as:
#leftNav .searchBySub {...}
#leftNav .searchBySubClicked {...}
Simply removing the :hover from the CSS won't work as the same CSS is used for both desktop and iPad versions.
I have already attempted various methods including:
a[i].ontouchstart=function(e){
e.stopPropagation();
e.preventDefault();
return false;
}