如何模拟触摸设备上的悬停效果？ [英] How to simulate hover effect on touch devices?

问题描述

我有一个悬停的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：

 < code $ // $ arm $ b $（'＃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 class'hover_effect'，当鼠标离开时，我删除'hover_effect'类。

如何在触摸设备上实现相同的功能？点击事件没有回调，所以点击发生后我无法删除'hover_effect'类。我尝试了mousedown和mouseup，但没有奏效。我搜索了stackoverflow，我发现这个如何在支持触摸的浏览器中模拟悬停触摸？，但它没有任何作用。

任何人都可以想到吗？

谢谢

Mauro

解决方案

试试这个

$ b $（$'pre> $（'＃arm'）。bind（'touchstart'，function（）{
$（this）.removeAttr（'style'）。css 'bottom'，'244px'）;
$（this）.addClass（'hover_effect'）;
}）;
$ b $（'＃arm'）。bind（'touchend'，function（）{
$（this）.removeClass（'hover_effect'）;
}）;


同样适用于 $（'＃man'）。

I have a web page with some css3 animation on hover and I would like to make it work on iPad (and any touch enabled device) when the user touch these elements.
Here's my code:

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');
});

You can see that when the mouse enter the elements I remove the style then apply a style and add the css class 'hover_effect' and when the mouse leaves I remove the 'hover_effect' class.
How can I achieve the same thing on touch devices? The click event doesn't have the a callback so I cannot remove the 'hover_effect' class after the click happens. I tried mousedown and mouseup but it didn't work. I searched stackoverflow and I found this How do I simulate a hover with a touch in touch enabled browsers? but it didn't have any effect.
Any idea anyone?

Thanks
Mauro

解决方案

try this

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

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

similarly for $('#man').

这篇关于如何模拟触摸设备上的悬停效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！