如何消除支持触摸的设备按钮上的粘滞悬停效果
使用永久导航按钮创建轮播时,会出现一个常见问题触摸设备。按钮的悬停状态(通常显示为蓝色)变得“粘性”,即使在点击后仍保持激活状态。已经探索了解决此问题的几种方法:
理想的解决方案是在触摸结束时删除悬停状态。然而,没有直接的方法可用于此。聚焦于另一个元素并不会消除悬停状态。虽然手动点击另一个元素确实如此,但在 JavaScript 中以编程方式触发此操作仍然是一个挑战。
要有效解决此问题,您可以利用 CSS 媒体查询级别 4 的最新开发:
@media (hover: hover) { button:hover { background-color: blue; } }
此 CSS 实质上指出,“如果设备支持真正的悬停(例如,具有类似鼠标的主要输入设备),则应用按钮悬停
对于尚未实现此功能的浏览器,可以利用 JavaScript 填充来检测悬停支持并切换自定义类,从而允许您有条件地应用悬停样式:
html.my-true-hover button:hover { background-color: blue; }
$(document).on('mq4hsChange', function (e) { $(document.documentElement).toggleClass('my-true-hover', e.trueHover); });
该解决方案有效消除了触摸设备的粘滞悬停效果,同时在使用鼠标输入的设备上保持所需的美观效果。
以上是如何消除触摸设备按钮上的粘滞悬停效果?的详细内容。更多信息请关注PHP中文网其他相关文章!