javascript - 如何在支持触摸的浏览器中模拟带有触摸的悬停？

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

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

简单!