Hover Zustand auf animierte Elemente

Question

Browser-Anbieter scheinen :hover in sehr gebrochenen Weise umzusetzen: Sie einziges Element Zustände, wenn die Maus bewegt, aber nicht wenn Elemente Bewegung (CSS-Animationen, etc.) ändern. Wenn Sie also beispielsweise auf ein Element klicken, das über eine Hover-Regel verfügt, die es aufleuchtet, und durch Klicken auf eine CSS-Animation, die das Element vom Mauszeiger entfernt, , bleibt das Element weiterhin im Status: Hover, was natürlich völlig falsch ist.

Ich habe jetzt meine eigene Mouseover-Behandlung in einem requestAnimationFrame Callback implementiert, wo ich alle Elemente gegen die Mausposition überprüfe, aber ernsthaft, das kann nicht notwendig sein? Gibt es keine Möglichkeit, :hover zu beheben?

Voll Beispiel:

div { 
 
    position: absolute; 
 
    top: 5rem; 
 
    left: 10rem; 
 
    width: 3rem; 
 
    height: 3rem; 
 
    background: red; 
 
    transition: left 0.5s; 
 
} 
 
div.moved { 
 
    left: 30rem; 
 
} 
 
div:hover { 
 
    background: green; 
 
}

<div onclick="this.classList.toggle('moved')"></div>

ich die Argumente in den Kommentaren Zyklen in Bezug auf Wasting CPU gelesen habe ständig die Hover-Zustände aller Elemente auf der Seite zu überprüfen. Wie ich bereits sagte, habe ich dies in Javascript (!) Innerhalb eines Callbacks requestAnimationFrame implementiert, und ich bemerke keine messbare Abnahme der Leistung. Wenn dies in der Engine des Browsers implementiert wäre, hätte dies keinerlei Auswirkungen auf die Performance. Sollten Browser-Anbieter dies nicht korrekt umsetzen, jetzt im Jahr 2015?

Answer 1

hover ist eine relativ alte CSS-Funktion und wird aus einer Zeit gesetzt, als der einzige bewegliche Teil einer Webseite der Cursor war. Es macht also keinen Sinn, ständig den Mauszeiger zu bewegen, und wäre in einer Zeit, in der Elemente auf einer Seite nicht verschoben wurden, als übertrieben betrachtet worden.

Stattdessen überprüft es, ob sich der Cursor über dem Element befindet, wenn sich der Cursor bewegt. Dies ist weit weniger geeignet, um Attribute zu verschieben, wie Sie sagen, aber macht Sinn aus Sicht des Code-Schreibens, als es geschrieben wurde, gab es keine Notwendigkeit, die alternativen Probleme der Elementbewegung zu berücksichtigen.

Es gibt keine Möglichkeit, das CSS-Verhalten selbst sofort zu aktualisieren, da dies außerhalb der Reichweite von Site-Designern codiert ist. Daher ist die Verwendung von javascript Ihre einzige echte Lösung.

Sie können dies als einen Fehler melden, aber dies wird wahrscheinlich nur entweder als eine neue Wähler Fähigkeit wie :HoverUpdate[unwahrscheinlich] oder mit CSS4 (Ich habe den Status CSS4 keine Ahnung herauskommen wird korrigiert bekommen, wenn dies nicht von denen bemerkt wurde, die damit verbunden sind, dann kann es sogar eine CSS5 Sache sein).

Es gibt verschiedene Themen, die die Kernverhalten von hover on the fly oder in einer nicht-zentralisierte Art und Weise auf sich verändernde - vor allem, dass jeder andere Browser-Engine könnte die Änderungen auf unterschiedliche Weise und verschiedene Versionen anpassen (Wir haben bereits gefunden dass Firefox den :hover Selektor etwas zufällig handhabt).

Der Punkt ist, dass es nicht etwas ist, das durch den Browser selbst sauber repariert werden kann oder sollte, sondern innerhalb der Definitionen/des Codes von CSS selbst, wie von W3C festgelegt, behoben werden sollte.

Auf der anderen Seite, die Benutzer mit Mäusen bewegen sie so viel herum (auch nur ein oder zwei Pixel), dass es etwas fraglich ist Ihre Situation außerhalb eines Spiels, wo die Maus in einem eingefroren werden muss Position und für die Hover-Selektor ständig überprüft werden, wie Sie bereits getan haben, denke ich, rollen Sie es mit Javascript kann dies als ein relativer Rand Fall und in ein paar Jahren CSS4 möglicherweise haben eine eingebaute Lösung .

Nächste Schritte

• Berichten Sie einen Fehler zu jedem Browser builder
• melden Feature-Request an W3C für sie als CSS-4-Spezifikation
• Möglicherweise erkunden, ob es einen Weg gibt, zu erhalten Browser-Plugins, um dieses Problem zu lösen (wieder, zufällig).
• Verwenden Sie Javascript.