如何模拟具有触摸功能的浏览器的悬停？

Question

使用这样的HTML：

<p>Some Text</p>

然后是这样的CSS：

p {
  color:black;}p:hover {
  color:red;}

我如何允许长时间触摸允许触摸的设备复制悬停？我可以更改标记/使用JS等，但我想不出一个简单的方法来做到这一点。

Answer 1

它涉及稍微修改CSS和添加一些JS。使用jQuery可以简化以下操作：$(document).ready(function() {     $('.hover').on('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;        }若要停止浏览器要求您复制/保存/选择图像或其他内容，请执行以下操作。放轻松！

Answer 2

您所需要做的就是绑定父母的TouchStart。像这样的东西会起作用的：$('body').on('touchstart', function() {});你不需要在函数中做任何事情，把它空着。这足以在触摸时得到悬停，所以触摸的行为更像：悬停，而不是像：Active。iOS魔法。

Answer 3

试试这个：<script>document.addEventListener("touchstart",&nbsp;function(){},&nbsp;true);</script>在你的CSS中：element:hover,&nbsp;element:active&nbsp;{-webkit-tap-highlight-color:&nbsp;rgba(0,0,0,0);-webkit-user-select:&nbsp;none; -webkit-touch-callout:&nbsp;none&nbsp;/*only&nbsp;to&nbsp;disable&nbsp;context&nbsp;menu&nbsp;on&nbsp;long&nbsp;press*/}有了这段代码，您就不需要额外的.hover类了！