如何防止触摸设备上按钮的粘性悬停效果

8 浏览
0 Comments

如何防止触摸设备上按钮的粘性悬停效果

我已经创建了一个带有前一个和后一个按钮的轮播图，这些按钮始终可见。这些按钮有一个悬停状态，它们会变成蓝色。在像iPad这样的触摸设备上，悬停状态是固定的，所以在点击后按钮会保持为蓝色。但是我不想要这样。

  • 我可以在每个按钮上添加一个no-hover类，在ontouchend事件中使用，并将我的CSS设置为：button:not(.no-hover):hover { background-color: blue; } 但这可能对性能有很大影响，并且不能正确处理像Chromebook Pixel这样既有触摸屏又有鼠标的设备。
  • 我可以在documentElement上添加一个touch类，并将我的CSS设置为：html:not(.touch) button:hover { background-color: blue; } 但这在既有触摸又有鼠标的设备上也不能正常工作。

我更希望在ontouchend事件中移除悬停状态。但似乎不可能做到这一点。聚焦到另一个元素并不能移除悬停状态。手动点击另一个元素可以，但我似乎无法在JavaScript中触发它。

我找到的所有解决方案都不完美。是否有一个完美的解决方案？

0