当您在移动屏幕上拖动手指时，如何使 :hover 在移动设备上工作？答案

【问题标题】：当您在移动屏幕上拖动手指时，如何使 :hover 在移动设备上工作？
【发布时间】：2022-01-23 05:44:40
【问题描述】：

我有简单的html

<head>
<style>
  div.hdiv {width: 200px; height:200px; margin:5px; display:inline-block;}
  div.hdiv {background: red;}
  div.hdiv:hover {background: green;}
</style>
</head>
<!-- -------------------- -->
<body>
<div class="hdiv">content</div>
<div class="hdiv">content</div>
</body>

当我将手指在屏幕上拖过元素时，我希望 :hover 效果在移动设备上起作用。目前，它们仅在您点击屏幕时起作用。

如何做到这一点？

【问题讨论】：

你看过触摸事件吗？
我认为你不能只用 css，也许用 js 触摸事件？ :) document.addEventListener("touchstart", function() {});
Laaouatni Anas，据我所知，touchstart 监听器用于模拟悬停而不点击元素。我需要 :hover （或等效的）在屏幕上移动的手指下工作。
@anthony3d 好的 :)

标签： javascript html jquery css hover

【解决方案1】：

您可以为元素添加一个 touchstart 监听器并添加一个类。

然后，您可以在 toucend 上删除该类。

请注意，这是 sn-p 添加到原始代码的所有内容（并且 :hover 仍然可以在可悬停设备上工作）。如果您希望在手指/触控笔离开元素时颜色变回，则需要更多代码来感知触摸移动位置，如果它在元素之外，请删除该类。

这取决于您的“可悬停”元素有多大，以及这样做是否明智，因为触摸不如鼠标/光标准确。

const hdivs = document.querySelectorAll('.hdiv');

function touchStart(ev) {
  ev.preventDefault();
  ev.target.classList.add('hover');
}

function touchEnd(ev) {
  ev.preventDefault();
  ev.target.classList.remove('hover');
}
hdivs.forEach(hdiv => {
  hdiv.addEventListener('touchstart', touchStart, false);
  hdiv.addEventListener('touchend', touchEnd, false);
});

div.hdiv {
  width: 200px;
  height: 200px;
  margin: 5px;
  display: inline-block;
}

div.hdiv {
  background: red;
}

div.hdiv:hover,
div.hdiv.hover {
  background: green;
}

<body>
  <div class="hdiv">content</div>
  <div class="hdiv">content</div>
</body>

【讨论】：

我想要的不是那样工作的。 :(
嗨，你能描述一下什么不起作用吗？