jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何在触摸设备上模拟悬停效果?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个在悬停时有一些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?,但它没有任何影响.
有人在想吗?

谢谢
毛罗

解决方法

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

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

同样的$(‘#man’).

大佬总结

以上是大佬教程为你收集整理的jquery – 如何在触摸设备上模拟悬停效果?全部内容,希望文章能够帮你解决jquery – 如何在触摸设备上模拟悬停效果?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: