无涯教程网

Css 如何防止touch 设备上按钮的粘滞悬停效果

发布于01月21日

我已经创建了一个 carousel ，其中的"上一步"和"下一步"按钮始终可见.这些按钮处于悬停状态，它们会变成蓝色.在像iPad这样的触控设备上，悬停状态是粘滞的，所以按钮在点击后仍然是蓝色的.我不想这样.

我可以 for each 按钮添加一个no-hover类ontouchend，并使我的CSS是这样的:button:not(.no-hover):hover { background-color: blue; }，但这可能对性能很不好，而且不会处理Chromebook Pixel等设备(它既有 touch 屏和鼠标).
我可以在documentElement上加一个touch类，然后把我的CSS 像这样:html:not(.touch) button:hover { background-color: blue; }，但这也不能在同时具有touch 屏和键盘的设备上正常工作老鼠.

我更喜欢的是取消悬停状态ontouchend.但这似乎不可能.聚焦另一个元素不会移除悬停状态.手动点击另一个元素可以，但我似乎无法在JavaScript中触发它.

我找到的所有解决方案似乎都不完美.有没有完美的解决方案？

推荐答案

由于CSS Media Queries Level 4的这一部分现在是widely implemented since 2018，您可以使用:

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

或者用英语说:"如果浏览器支持正确/真实/真实/非模拟悬停(例如，有一个类似鼠标的主输入设备)，则在悬停button秒时应用此样式."

对于没有实现这一点的浏览器(或者在给出原始答案时没有实现)，I wrote a polyfill%的用户可以处理这个问题.使用它，您可以将上述future 主义CSS转换为:

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

(.no-touch技术的变体)，然后使用来自检测悬停支持的同一多边形填充的一些客户端JavaScript，您可以相应地切换my-true-hover类的存在:

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

Css相关问答推荐

当父母滚动时，让子元素变得粘稠

如何使用基于嵌套子类的CSS邻近 Select 器？

关于React.js的CSS Select 器

大型菜单的CSS动态布局，根据菜单项的数量以行或列形式读取

如何在CSS中使用nextJs来指定基色？

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值？

CSS 不要 Select 包含混合内容的 div 中的第一个元素

SASS 中的计算表达式

使用 React 和 Flexbox 文本溢出框外

为什么 em 不将定义的字体大小加倍？

关键帧不能动画回来

普通流，流布局，块和内联布局有什么区别？

如何使用 TailwindCSS 禁用环形阴影？

如何在 nth-child 中正确传递 CSS 变量？

如何使单选按钮看起来像切换按钮

使用 JavaScript 将 CSS 添加到？

如何更改 CSS：JavaScript 中的根 colored颜色变量

空的 iframe src 是否有效？

如何应用 CSS 分页符来打印包含大量行的表格？

实用课程推荐

相关教程推荐