如何使用长按模拟触摸屏上的悬停效果？

使用长按在支持触摸的设备上触发悬停效果

在支持触摸的设备（例如智能手机和平板电脑）上复制悬停效果，您可以利用 CSS 和 JavaScript 的组合。它的工作原理如下：

HTML 标记

将名为“hover”的类添加到要应用悬停效果的任何元素。例如：

<code class="html"><p class="hover">Some Text</p></code>

CSS 样式

修改 CSS 以包含 :hover 和 .hover_effect 类的悬停效果。 .hover_effect 类将用于模拟触摸设备上的悬停效果：

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

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

JavaScript

使用 JavaScript 检测长按事件。下面是一个使用 jQuery 的示例：

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

此 JavaScript 代码为具有“hover”类的元素添加 touchstart 和 touchend 事件的事件处理程序。当触摸开始或结束时，它会切换触摸元素上的hover_effect类。

附加CSS

防止浏览器显示上下文菜单或要求确认在移动设备上触摸元素，添加以下 CSS 规则：

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

结果

通过组合这些元素，您现在可以模拟启用触摸的悬停效果通过长按所需的元素来设备。此方法可用于创建交互式元素，例如按钮或链接，而无需传统的鼠标悬停。

以上是如何使用长按模拟触摸屏上的悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！