通过css删除所有悬停效果

Question

当我在触摸设备上下来时,我不想要悬停行为.是否可以立即禁用整个网站的所有悬停效果？

鉴于您使用Modernizr来检测触摸并设置类.

这是我想出来的,但它给出了很多不一致性:

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

有没有办法用纯CSS做到这一点？如果没有,如何用javascript完成？

Answer 1

这很好,但不太支持:

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

但这有很好的支持:

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

对我来说完美无瑕,它使所有的悬停效果就像当你触摸一个按钮时它会亮起但不会因为鼠标事件的初始悬停效果而失败.