如何在支持触摸的浏览器中复制长触摸的悬停效果？-js教程-PHP中文网

如何在支持触摸的浏览器中复制长触摸的悬停效果？

Linda Hamilton

发布： 2024-10-22 19:04:02

原创

766 人浏览过

How to Replicate Hover Effects for Long Touches in Touch-Enabled Browsers?

使用触摸手势模拟悬停效果

场景：

您有一个网页，其中包含使用 CSS 设计样式的 HTML 元素。具体来说，您的元素具有“悬停”效果，当光标悬停在它们上方时，它们的颜色会发生变化。但是，在支持触摸的浏览器中，您希望在长触摸时复制此行为。

解决方案：

要实现此目的，请按照以下步骤操作：

修改 CSS： 将以下类添加到要启用悬停效果的 HTML 元素中：

<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>

登录后复制

这可确保“hover_effect” " 类复制了 ":hover" 伪类的样式。

添加 JavaScript: 使用 jQuery 实现以下代码：

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

登录后复制

阻止默认浏览器行为： 要阻止浏览器的默认触摸操作（例如上下文菜单），请将以下 CSS 添加到样式表中：

<code class="css">.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}</code>

登录后复制

这种修改组合允许在符合条件的元素上进行触摸并按住手势，以模拟支持触摸的浏览器的悬停事件。

以上是如何在支持触摸的浏览器中复制长触摸的悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！