Entfernen Sie alle Hover-Effekte durch css

Question

Wenn ich auf Touch-Geräten herunterkommen will ich nicht das Hover-Verhalten. Ist es möglich, alle Hover-Effekte für eine ganze Website gleichzeitig zu deaktivieren?

Vorausgesetzt, dass Sie Modernizr verwenden, um Berührung zu erkennen und die Klasse festzulegen.

Das ist, was ich kam mit, aber es gibt viel Inkonsequenz:

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

Gibt es eine Möglichkeit, dies mit reinem CSS zu tun? Wenn nicht, wie kann es mit Javascript gemacht werden?

Answer 1

Das ist gut, aber nicht supported sehr gut:

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

Das hat aber eine sehr gute support:

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

für mich funktioniert einwandfrei, es macht alle Hover-Effekte Wie wenn Sie eine Berührung auf einer Taste haben, wird sie aufleuchten, aber nicht als Anfangshimmeleffekt für Mausereignisse enden.

Answer 2

Versuchen Sie, die all:unset oder all:initial

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

Unterstützung (https://developer.mozilla.org/en-US/docs/Web/CSS/all)

Answer 3

Der Versuch, eine allumfassende Lösung wahrscheinlich heikel sein wird, beschränkt ist. Ich würde nur überall in Ihrem CSS konvertieren, wo Sie eine Hover definiert:

.thing:hover {} 

die Modernizr Klasse umfassen:

html.no-touch .thing:hover {} 

Obwohl Sie sollten sich bewusst sein, dass jede Lösung, die Modernizr verwendet wird keine sein ' reine CSS-Lösung ", da Modernizr Javascript ist.