Heim >Web-Frontend >CSS-Tutorial >Was tun, wenn Hover nicht funktioniert?
Was tun, wenn Hover nicht funktioniert?
- 藏色散人Original
- 2021-03-03 10:40:429249Durchsuche
Hover funktioniert nicht. Lösung: 1. Überprüfen und löschen Sie das Leerzeichen vor „:hover“. 2. Überprüfen und ändern Sie den korrekten Klassennamen. 3. Überprüfen Sie, ob „:hover“ zwischen „:link“ und „:visited“ steht. , ändern Sie einfach den Standort.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer.
Es gibt mehrere Gründe, warum Hover in CSS nicht funktioniert:
1. Fügen Sie vor der Einstellung:hover:
Zum Beispiel
<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>Sie stellen fest, dass sich der Hintergrund nicht ändert, wenn die Maus an Klasse eins vorbeifährt. aber andere Objekte in einem Die Hintergrundfarbe des Div ändert sich
Erläuterung: Das Hinzufügen eines Leerzeichens vor :hover hat nicht den Effekt von :hover selbst, aber die untergeordneten Elemente haben den Effekt von :hover.
[Empfohlenes Lernen: CSS-Video-Tutorial]
2. Wenn Sie mit der Maus darüber fahren, lassen Sie andere Elemente den Stil ändern:
Zu diesem Zeitpunkt werden Sie feststellen, dass nur untergeordnete Elemente und Geschwisterelemente (Geschwisterelemente unmittelbar nach dem Element) vorhanden sind ) ) wird wirksam sein, andere :hover werden ungültig sein
4.:hover wird vor :link und :visited platziert;
In der CSS-Definition muss a:hover stehen Es ist nur gültig, wenn es nach a:link und a:visited platziert wird.
In der CSS-Definition muss a:active nach a:hover platziert werden, um gültig zu sein.
Das obige ist der detaillierte Inhalt vonWas tun, wenn Hover nicht funktioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!