如何在支持触摸的浏览器中模拟悬停触摸?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

用一些这样的HTML:

<p>Some Text</p>

然后是这样的一些CSS:

p {
  color:black;
}

p:hover {
  color:red;
}

我如何允许长触摸启用触摸的设备来复制悬停?我可以改变标记/使用JS等,但不能想到一个简单的方法来做到这一点。

提问于
用户回答回答于

使用jQuery来简化它:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

在英语中:当你开始或结束一个接触时,打开hover_effect或关闭课程。

然后,在你的HTML中,添加一个类悬停到任何你想要的工作。在你的CSS中,替换以下任何实例:

element:hover {
    rule:properties;
}

element:hover, element.hover_effect {
    rule:properties;
}

并且为了增加实用性,也将其添加到你的CSS中:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

停止浏览器要求你复制/保存/选择图像或其他内容。

用户回答回答于

绑定touchstart。像这样的东西可以工作:

$('body').bind('touchstart', function() {});

扫码关注云+社区