Когда проект разрабатывается для всех устройств, то по лучше сделать правильный hover для активных элементов.
Так как на touch устройствах не используется мышка, то и соответственно события hover не происходит. Но желательно выделить активный элемнт при нажиме на него, что было похоже как на обычном компьютере, когда наводишь мышь элемент. Для этого существуют touch события.
Это события touchstart и touchend.
touchstart происходит тогда, когда пользователь прикоснулся к элементу, это на подобие mousedown.
touchend происходит тогда, когда пользователь убрал палец от элемента, а это на подобие mouseup.
Теперь рассмотрим небольшой пример.
Этот блок при наведении или при нажатии пальцем на touch устройстве будет становиться синим.
А теперь собственно код:
<style>
#touchElement{
background:red;
width:200px;
height:100px;
cursor:pointer;
margin:30px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
try {
document.createEvent("TouchEvent");
return true;
}
catch (e) { return false; }
}
if ( isTouch() ) {
// Тут код, который будет выполняться, если браузер пользователя мобильный
$("#touchElement").bind('touchstart',
function(){
$(this).css('background','blue');
}
);
$("#touchElement").bind('touchend',
function(){
$(this).css('background','red');
}
);
}else{
// Тут код для остальных браузеров
$("#touchElement").hover(
function(){
$(this).css('background','blue');
},
function(){
$(this).css('background','red');
}
);
}