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

javascript html css touch hover

2022-08-30 04:45:38

使用一些这样的HTML：

<p>Some Text</p>

然后一些这样的CSS：

p {
  color:black;
}

p:hover {
  color:red;
}

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

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

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

容易！

答案 2

您需要做的就是在父级上绑定 touchstart。像这样的东西会起作用：

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

您无需在函数中执行任何操作，请将其留空。这足以让触摸悬停，因此触摸的行为更像：hover，而不太像：active。iOS 魔术。