I have a specific issue related to CSS on iPad. I am working with a set of sublinks and have defined the styles in CSS as follows:
#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}
In my JavaScript code, I have the following definitions:
$("#leftNav a.searchBySub").live("touchstart",function(){...}
$("#leftNav a.searchBySub").live("click",function(){...}
My concern is that when clicking on any sublink on the iPad, it seems to apply the :hover state CSS to it. Is there a way to change or override this behavior?
Before suggesting basic fixes, please note that I have already explored some options without success.
I understand that there is no hover event on iPads, but nonetheless, the :hover state class is being applied when links are clicked in my case.
Removing the :hover definition from the CSS is not an option for me due to compatibility issues with desktop browsers. So, my primary question remains: how can I prevent the :hover state from being triggered when a link is clicked?
Here is the updated code snippet I've 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));
});