通过css删除所有悬停效果

daolsyd0 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(148)

当我使用触控设备时，我不希望鼠标悬停。有没有可能一次禁用整个网站的所有鼠标悬停效果？
假设您使用Modernizr检测触摸并设置类。
这是我得出的结论，但它给出了很多不一致的地方：

html.touch *:hover {
    color: inherit !important;
    background: inherit !important;
}

有没有办法用纯CSS做到这一点？如果没有，怎么用javascript做到呢？

3条答案

这是现在支持非常体面的所有移动浏览器，这里是我可以使用链接：

html.touch *:hover {
    all:unset!important;
}

这很好，但**supported**不是很好：

html.touch *:hover {
    all:unset!important;
}

但这有一个非常好的支持：

html.touch *:hover {
    pointer-events: none !important;
}

工程完美无瑕的我，它使所有的悬停效果就像当你有一个按钮触摸它会亮起，但不会结束buggy作为最初的悬停效果鼠标事件。

试试all:unset或all:initial

html.touch *:hover {
    all:unset!important;
}

尝试一个包罗万象的解决方案可能会很棘手，我只会转换css中定义hover的任何地方：

.thing:hover {}

包括Modernizr类：

html.no-touch .thing:hover {}

尽管你应该意识到任何使用Modernizr的解决方案都不是一个“纯CSS解决方案”，因为Modernizr是javascript。