Warum gibt es manchmal keine Reaktion, wenn das Hover-Attribut in CSS verwendet wird? (Beispiel)-CSS-Tutorial-php.cn

Warum gibt es manchmal keine Reaktion, wenn das Hover-Attribut in CSS verwendet wird? (Beispiel)

藏色散人

Freigeben： 2018-08-10 17:24:10

Original

10849 Leute haben es durchsucht

Wenn wir Hover in CSS verwenden, stoßen wir gelegentlich auf ungültige Situationen, was wirklich besorgniserregend ist. Was genau hat den Fehler verursacht? In diesem Artikel werden die Gründe zusammengefasst, warum Hover in CSS fehlschlägt.

Die spezifischen Codebeispiele für die Hover-Nutzung in CSS sind wie folgt:

<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>css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

Nach dem Login kopieren

Zusammenfassung der ungültigen Gründe:

1. Beim Testen des obigen Codes Es wurde festgestellt, dass die Maus die Klasse passierte. Wenn man sich in einem befindet, bleibt die Hintergrundfarbe unverändert, aber die Hintergrundfarbe anderer Divs in einem ändert sich. Dies zeigt, dass das Hinzufügen eines Leerzeichens vor :hover nicht die Wirkung von :hover hat , aber die Nachkommenelemente haben den Effekt von :hover.

2. Nur Nachkommenelemente und Geschwisterelemente (Geschwisterelemente direkt nach dem Element) haben eine Wirkung, und andere :hover sind ungültig

3. Der Klassenname ist falsch;

4. :hover ist auch ungültig, wenn es vor :link und :visited platziert wird;

Hinweis:

:hover-Selektor wird verwendet, um das Element auszuwählen, auf dem sich der Mauszeiger befindet schwebend.

Tipp: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.

Tipp: Der :link-Selektor legt den Stil von Links fest, die auf Seiten verweisen, die nicht besucht wurden. Der :visited-Selektor wird verwendet, um Links auf Seiten zu setzen, die besucht wurden, und der :active-Selektor wird für verwendet aktive Links. In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) stehen, damit der Stil wirksam wird.

Das obige ist der detaillierte Inhalt vonWarum gibt es manchmal keine Reaktion, wenn das Hover-Attribut in CSS verwendet wird? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!