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

问题描述

我有一个带有一些 css3 悬停动画的网页，我想让它在用户触摸这些元素时在 iPad(和任何支持触摸的设备)上运行.
这是我的代码:

html:

<a id="arm"></a><div id="head"><div id="闪烁"></div><div id="盖子"></div><div id="人"></div><a id="man-arm"></a>

js:

//手臂$('#arm').hover(function(){$(this).removeAttr('style').css('bottom','244px');$(this).addClass('hover_effect');}， 功能(){$(this).removeClass('hover_effect');});//人的手臂$('#man').hover(function(){$('#man-arm').removeAttr('style');$('#man-arm').addClass('hover_effect');}， 功能(){$('#man-arm').removeClass('hover_effect');});

您可以看到，当鼠标进入元素时，我删除了样式，然后应用了样式并添加了 css 类hover_effect"，当鼠标离开时，我删除了hover_effect"类.
如何在触摸设备上实现相同的功能?单击事件没有回调，因此在单击发生后我无法删除hover_effect"类.我试过 mousedown 和 mouseup 但没有用.我搜索了stackoverflow，发现了这个如何在支持触摸的浏览器中通过触摸模拟悬停?但它没有任何效果.
有人知道吗?

谢谢
毛罗

解决方案

试试这个

$('#arm').bind('touchstart', function() {$(this).removeAttr('style').css('bottom','244px');$(this).addClass('hover_effect');});$('#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屋！