我有一个在悬停时有一些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’).
