如何在启用了触摸功能的浏览器中使用触摸来模拟悬停？

小编典典

如何在启用了触摸功能的浏览器中使用触摸来模拟悬停？

css

用这样的HTML：

<p>Some Text</p>

然后像这样的一些CSS：

p {
  color:black;
}

p:hover {
  color:red;
}

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

阅读 282

2020-05-16

共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;        
}

要停止浏览器要求您复制/保存/选择图像或其他操作。

简单！

2020-05-16