Die Gründe, warum CSS-Hover fehlschlägt: 1. In der CSS-Definition wird „a:hover“ nicht nach „a:link“ und „a:visited“ platziert. 2. In der CSS-Definition wird „a:active“ nicht platziert nach „a:hover“ platziert.
Empfehlung: „CSS-Video-Tutorial“
Mehrere Gründe für Hover-Fehler in CSS:
Beim Einrichten von CSS-Hover werden Sie manchmal feststellen, dass Hover nicht funktioniert. Lassen Sie uns die Gründe zusammenfassen :
Tipps: In der CSS-Definition muss a:hover nach a:link und a:visited platziert werden, um gültig zu sein.
Tipps: In der CSS-Definition muss a:active nach a:hover platziert werden, um gültig zu sein. ?? : Vor:hover hinzufügen Der Raum selbst hat keinen :hover-Effekt, aber untergeordnete Elemente haben einen :hover-Effekt.
2. Wenn Sie mit der Maus darüber fahren, ändern Sie den Stil anderer Elemente:
Zu diesem Zeitpunkt werden Sie feststellen, dass nur untergeordnete Elemente und Geschwisterelemente (Geschwisterelemente unmittelbar nach dem Element) eine Wirkung haben, während andere :hover-Elemente eine Wirkung haben ungültig
Immer noch das gleiche Beispiel
Das Ändern von
<style type="text/css"> .one { margin: 0 auto; width: 400px; height: 300px; background: #ced05d; } .two { margin: 0 auto; width: 100px; height: 100px; background: #5a5aea; } .three { margin: 0 auto; width: 200px; height: 100px; background: #4b9c49; } .four { margin: 0 auto; width: 300px; height: 100px; background: #7b4141; } .one :hover { background: #da56d0; } </style> <body> <h1>测试</h1> <div class="one"> <div class="two"> </div> <div class="three"> </div> <div class="four"> </div> </div> </body>
in
.one :hover { background: #da56d0; }
hat ergeben, dass wir den gewünschten Effekt erzielen können
Das Ändern in
.one:hover .two { background: #da56d0; }
kann ebenfalls den Effekt erzielen (beachten Sie, dass, wenn das „+“-Zeichen entfernt wird, der Effekt wird nicht erreicht)
Eine Änderung in
.two:hover +.three { background: #da56d0; }
kann unseren Effekt nicht erzielen (mit oder ohne das Pluszeichen)
3. Der Klassenname ist falsch geschrieben;
4.:hover wird vor :link platziert und :besucht;
5. Du hast es falsch gelesen;
Warte...
Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie CSS-Hover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!