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

Posted 2023-03-06

【中文标题】如何在触摸设备上模拟悬停效果？

【英文标题】：How to simulate hover effect on touch devices?

【发布时间】：2012-02-16 17:20:36

【问题描述】：

我有一个网页，在悬停时有一些 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，但没有成功。我搜索了***，发现了这个How do I simulate a hover with a touch in touch enabled browsers?，但没有任何效果。 有人知道吗？

谢谢 毛罗

【参考方案1】：

试试这个

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

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

$('#man'). 类似

【参考方案2】：

或者您可以在 css 下添加 :hover 类，例如 a#man:hover.... [如果您想要相同的效果或使用差异，也可以这样。差异的颜色或图像。结果]。