大佬教程收集整理的这篇文章主要介绍了jquery – 如何在触摸设备上模拟悬停效果?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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,请注明来意。