移动端 :hover 导致双击问题是因为触摸设备在触发悬停状态后，若用户再次点击同一位置，浏览器会将其识别为第二次点击从而触发 click 事件，造成重复执行。规避的核心做法是移除不必要的 :hover 样式或确保交互逻辑不依赖悬停状态来维持可见性。
为什么移动端:hover会导致双击问题
在移动设备上，触摸操作会依次触发 touchstart、touchend 和模拟的 mouse 事件。如果 CSS 中使用了 :hover 来控制菜单或提示框的显示，第一次触摸会先触发 :hover 使元素可见，紧接着触发 click。此时元素已经可见，如果用户再次快速点击同一区域，浏览器会再次触发 click 事件，导致逻辑被重复执行。
button {
background: blue;
}
button:hover {
background: red;
}
上述代码在移动端点击时，背景色会先变红（:hover），然后按钮执行点击逻辑。如果点击逻辑包含跳转或提交，双击可能导致重复提交。
立即学习“前端免费学习笔记（深入）”；
如何用CSS规避这个问题
最直接的规避方法是避免在移动端使用 :hover 来控制关键交互状态的持久化。可以使用 @media (hover: none) 查询来针对无悬停能力的设备覆盖样式，或者完全移除 :hover 选择器，改用 JavaScript 控制状态。
@media (hover: none) {
button:hover {
background: blue;
}
}
通过上述媒体查询，当设备不支持悬停时，:hover 样式将失效，从而避免双击带来的副作用。另一种做法是使用 pointer-events: none; 在特定状态下禁用鼠标事件，但需谨慎使用以免阻碍正常交互。
基于程序中某个输入、条件或结果的具体问题
当程序中存在多个重叠的可点击区域时，双击问题会更加明显。例如，一个按钮上方悬浮着一个提示层，该提示层由 :hover 控制显示。用户在移动端点击按钮时，可能会误触提示层，导致两次点击都被记录。解决此问题的具体做法是在提示层添加 pointer-events: none;，使其在显示时不响应点击事件，直到用户主动关闭它。
