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'类。
如何在触摸设备上实现相同的功能？ click事件没有回调，因此在单击发生后我无法删除'hover_effect'类。我尝试了mousedown和mouseup但它没有用。我搜索了stackoverflow，我发现了这个How do I simulate a hover with a touch in touch enabled browsers?，但它没有任何效果任何人都不知道吗？

感谢
莫罗

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').

Answer 2

或者你可以在:hover之类的css下添加a#man:hover{....}类[如果你想要相同的效果或使用diff也一样。差异的颜色或图像。结果]。

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

2 个答案: