我创建了一个带有始终可见的上一个和下一个按钮的轮播。这些按钮处于悬停状态,它们变为蓝色。在诸如iPad的触摸设备上,悬停状态为粘滞状态,因此在点击它后按钮保持蓝色。我不要
我可以为每个按钮添加一个
no-hover
类ontouchend
,并使CSS像这样:button:not(.no-hover):hover { background-color: blue; }
但这可能会降低性能,并且不能正确处理Chromebook Pixel(具有触摸屏和鼠标)之类的设备。我可以向中添加一个
touch
类documentElement
,并使CSS像这样:html:not(.touch) button:hover { background-color: blue; }
但是,这在同时带有触摸和鼠标的设备上也无法正常工作。
我更希望删除悬停状态ontouchend
。但这似乎是不可能的。聚焦另一个元素不会删除悬停状态。手动点击另一个元素可以,但是我似乎无法在JavaScript中触发它。
我发现的所有解决方案似乎都不完美。有没有完美的解决方案?