Mouseover (hover) on touch devices using jQuery
See http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/
by Chris Ames
HTML
<a class="taphover" href="http://www.google.com" target="_blank">Link 1</a>
<a class="taphover" href="http://www.microsoft.com" target="_blank">Link 2</a>
<a class="taphover" href="http://www.apple.com" target="_blank">Link 3</a>
CSS
a {
display: inline-block;
padding: 5px 15px;
}
a.taphover:hover, a.taphover.hover {
background: red;
color: white;
}
JavaScript
$('a.taphover').on("touchstart", function (e) {
"use strict"; //satisfy the code inspectors
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
return true;
} else {
link.addClass("hover");
$('a.taphover').not(this).removeClass("hover");
e.preventDefault();
return false; //extra, and to make sure the function has consistent return points
}
});