我们如何防止触摸环境中按钮的粘滞悬停效果？

克服触摸环境中按钮的粘性悬停效果

在设计使用触摸设备的用户界面时，管理按钮上的悬停效果可以是一个挑战。这个看似简单的任务变得复杂，因为触摸屏上会出现持续的悬停状态，触摸后悬停效果保持激活状态，导致按钮永远呈蓝色。

低效的解决方案

虽然存在解决方案，例如添加无悬停类 ontouchend 或使用带有 documentElement 的触摸类，但这些方法都有缺点。它们会降低性能，并且无法处理同时具有触摸屏和鼠标功能的设备。

难以捉摸的解决方案

理想的解决方案是在触摸结束时删除悬停状态，但是直接操纵悬停状态似乎难以捉摸。将注意力集中在其他地方无法消除悬停效果，并且点击另一个元素的手动操作似乎会停用它，但以编程方式触发此操作仍然是个谜。

突破

2018 年 CSS 媒体查询 Level 4 的到来为此带来了革命性的解决方案困境：

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

此声明本质上是这样表述的：“如果浏览器支持真正的悬停（例如，类似鼠标的输入设备），则当按钮悬停在上方时应用悬停样式。”

对于缺乏此功能的浏览器，polyfill 可以解决这个问题。利用这个polyfill，上面的未来CSS可以转换成：

html.my-true-hover button:hover {
    background-color: blue;
}

来自polyfill的客户端JavaScript然后检测悬停支持并相应地切换my-true-hover类的存在，提供一个优雅的解决触摸设备上粘滞悬停效果的问题。

以上是我们如何防止触摸环境中按钮的粘滞悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！