Beispiel, das die Verwendung des Pseudoklassenselektor-Hovers in CSS demonstriert-CSS-Tutorial-php.cn

Beispiel, das die Verwendung des Pseudoklassenselektor-Hovers in CSS demonstriert

yulia

Freigeben： 2018-10-23 15:47:21

Original

5288 Leute haben es durchsucht

Während des Seitenlayouts wird der Hover-Selektor in CSS häufig verwendet. Er kann einen speziellen Stil festlegen, wenn die Maus darüber fährt. Wie man den CSS-Pseudoklassen-Selektor verwendet schweben? In diesem Artikel erfahren Sie mehr über die Verwendung von Hover in CSS und Beispiele . Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Mit dem Hover des Pseudoklassenselektors können einige spezielle Stile festgelegt werden, wenn die Maus über den Link bewegt wird, z. B. Schriftgröße, Hintergrundfarbe, Anzeige und Ausblenden usw.

Hinweis: Der Pseudoklassenselektor-Hover kann auf alle Elemente wirken, nicht nur auf Links.

Selektoren, die dem Hover ähneln, umfassen „Link“, „Besucht“ und „Aktiv“. Der Link-Selektor kann den Link-Stil festlegen, der nicht besucht wurde, der besuchte Selektor kann den Link-Stil festlegen, der besucht wurde, und der aktive Selektor kann den aktivierten Link-Stil festlegen. Schüler, die sich nicht sicher sind, können auf das CSS-Video-Tutorial zurückgreifen.

Verwendung 1: Ändern Sie den eigenen Stil, wenn die Maus über den Link fährt (verbinden Sie den Stil direkt, nachdem Sie den Mauszeiger bewegt haben)

Beschreibung: Wenn die Maus darüber fährt Der Link, das a-Tag, ändert die Schriftfarbe in Rot und die Schrift wird größer. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">欢迎大家来PHP中文网学习交流</a>
</body>
</html>

Nach dem Login kopieren

Das erste Bild ist der ursprüngliche Effekt und das zweite Bild ist der nach der Maus erzielte Effekt geht darüber hinweg.

Beispiel, das die Verwendung des Pseudoklassenselektor-Hovers in CSS demonstriert

Verwendung 2: Verwenden Sie den Pseudoklassen-Selektor-Hover, um den Stil seiner untergeordneten Elemente zu steuern (hinzufügen). ein Leerzeichen nach dem Hover) Dann den Stil des Elements ändern)

Beschreibung: Wenn die Maus über das Div fährt, ändert sich die Farbe seiner Unterelemente in Lila, die Schriftart wird größer und ein roter Rand erscheint . Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="aa">望子成龙，望女成凤</a>
		</div>
	</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Beispiel, das die Verwendung des Pseudoklassenselektor-Hovers in CSS demonstriert

Verwendung 3: Kontrollieren Sie die Stil seiner Geschwisterelemente, wenn die Maus darüber fährt (fügen Sie „+“ nach dem Hover hinzu und ändern Sie dann den Stil des Elements)

Beschreibung: Wenn die Maus darüber fährt, ändert sich die Hintergrundfarbe seiner Geschwisterelemente zu Gelb und Die Schriftart wird größer. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box1:hover + .box2{font-size: 30px ;background: yellow;}
		</style>
	</head>
	<body>
		<div class="box1">床前明月光</div>
		<div class="box2">疑是地上霜</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Beispiel, das die Verwendung des Pseudoklassenselektor-Hovers in CSS demonstriert

Das Obige beschreibt die Verwendung des Pseudoklassenselektors Anfänger können es selbst ausprobieren, um zu sehen, ob Ihr Code den gewünschten Effekt erzielen kann.

Das obige ist der detaillierte Inhalt vonBeispiel, das die Verwendung des Pseudoklassenselektor-Hovers in CSS demonstriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!