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

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

藏色散人Original: 2018-08-10 17:24:1010687Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo)Nächster Artikel：Wie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo)

In Verbindung stehende Artikel

Mehr sehen