Heim >Web-Frontend >Front-End-Fragen und Antworten >So deaktivieren Sie CSS-Hover
So deaktivieren Sie CSS-Hover
- 藏色散人Original
- 2020-11-17 10:58:474155Durchsuche
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!