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

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", function(){}, true);</script>

在你的CSS中：

element:hover, element:active {-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/}

有了这段代码，您就不需要额外的.hover类了！