如何在触摸设备上模拟悬停效果？

Question

我有一个带有一些 CSS3 鼠标悬停动画的网页，我希望在 iPad（和任何触摸设备）上，当用户触摸这些元素时可以正常工作。
以下是我的代码：

HTML:

<div id="headBlock">
    <a id="arm"></a>
    <div id="head">
        <div id="blink"></div>
        <div id="lid"></div>
        <div id="man"></div>
        <a id="man-arm"></a>
    </div>
</div>

js：

//arm
$('#arm').hover(function(){
    $(this).removeAttr('style').css('bottom','244px');
    $(this).addClass('hover_effect');

    }, function(){
        $(this).removeClass('hover_effect');
});

//man arm
$('#man').hover(function(){
    $('#man-arm').removeAttr('style');
    $('#man-arm').addClass('hover_effect');

    }, function(){
        $('#man-arm').removeClass('hover_effect');
});

你可以看到当鼠标进入元素时，我会移除样式并应用新的样式，并添加css类“hover_effect”，当鼠标离开时，我会移除“hover_effect”类。如何在触摸设备上实现相同的效果？点击事件没有回调函数，所以我无法在点击后删除“hover_effect”类。我尝试了mousedown和mouseup，但它没有起作用。我在stackoverflow上搜索并找到了这个在启用触摸的浏览器中如何模拟悬停？但它没有任何效果。有什么想法吗？谢谢，Mauro。

- Mauro74

Answer 1

试一试

$('#arm').bind('touchstart', function() {
        $(this).removeAttr('style').css('bottom','244px');
        $(this).addClass('hover_effect');
});

$('#arm').bind('touchend', function() {
        $(this).removeClass('hover_effect');
});

同样地，对于$('#man')也是如此。

- dku.rajkumar

Answer 2

或者你可以在 CSS 下添加 :hover 类，例如 a#man:hover{....} [如果您想要相同的效果或使用不同的颜色或图像来显示不同的结果，也适用]。

- ravi gupta