我们如何消除触摸设备按钮上的粘滞悬停效应？

防止触摸设备上按钮的粘滞悬停效果

触摸设备中按钮的持久悬停状态可能会很麻烦。为了解决这个问题，已经提出了各种解决方案，但似乎没有一个完全令人满意。一种方法是在触摸端添加“无悬停”类，但这会对性能产生负面影响，并且无法考虑混合设备。另一种选择是向文档添​​加“触摸”类，但这在同时具有触摸和鼠标功能的设备上也会失败。

理想的解决方案：CSS 媒体查询级别 4

随着 CSS 媒体查询第 4 级的出现，出现了更完善的解决方案：

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

此媒体查询专门针对具有真实/非模拟悬停支持的浏览器（例如，带有鼠标的设备） -类似输入机制）。此类浏览器中的按钮将显示蓝色悬停效果。

旧版浏览器的 Polyfill

对于没有此功能的浏览器，有一个 JavaScript polyfill 可以模拟真正的悬停支持：

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

polyfill 会检测悬停功能并相应地切换“my-true-hover”类：

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

CSS 和 JavaScript 的这种组合确保悬停效果在两者上都能完美工作现代和传统触摸设备。

以上是我们如何消除触摸设备按钮上的粘滞悬停效应？的详细内容。更多信息请关注PHP中文网其他相关文章！