首页  >  文章  >  web前端  >  如何消除触摸设备按钮上的粘滞悬停效果?

如何消除触摸设备按钮上的粘滞悬停效果?

Susan Sarandon
Susan Sarandon原创
2024-11-11 16:58:03363浏览

How to Eliminate Sticky Hover Effects on Buttons for Touch-Enabled Devices?

如何消除支持触摸的设备按钮上的粘滞悬停效果

使用永久导航按钮创建轮播时,会出现一个常见问题触摸设备。按钮的悬停状态(通常显示为蓝色)变得“粘性”,即使在点击后仍保持激活状态。已经探索了解决此问题的几种方法:

  • 在 touchend 上添加 no-hover 类可以解决该问题,但它可能会影响性能,并在同时具有触摸和鼠标功能的 Chromebook 等设备上引入兼容性问题
  • 为 documentElement 实现触摸类并相应修改 CSS 也可以解决该问题,但对于同时具有触摸和鼠标的设备来说这并不是最佳选择支持。

理想的解决方案是在触摸结束时删除悬停状态。然而,没有直接的方法可用于此。聚焦于另一个元素并不会消除悬停状态。虽然手动点击另一个元素确实如此,但在 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn