Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie Hover in CSS
So verwenden Sie Hover in CSS
- 清浅Original
- 2019-04-30 10:10:43111236Durchsuche
In CSS wird Hover verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt. Die Syntax lautet „Label Selector:hover{Stilcode;}“. Verwendung: 1. Ändern Sie den Stil direkt auf dem angehaltenen Element 2. Den Stil der untergeordneten Elemente ändern; 3. Den Stil der benachbarten Elemente ändern;
Es gibt ein Hover-Attribut in CSS, das aktiviert werden kann, wenn die Maus nach oben bewegt wird. Es kann verwendet werden, um einige Funktionen ähnlich wie bei js zu implementieren. Als nächstes werden wir in diesem Artikel die Verwendung des Hover-Attributs im Detail vorstellen. Ich hoffe, dass es für alle hilfreich ist.
[Empfohlene Kurse: CSS-Tutorial]
Definition von Hover
:Hover-Selektor für Wenn Sie das Element auswählen, auf dem der Mauszeiger schwebt, gilt dies für alle Elemente
:hover Der Selektor gilt für alle Elemente
Hover-Verwendung
Verwendung 1: Bewegen Sie die Maus über das Element, um den Elementstil zu ändern
Beispiel: Wenn die Maus über die Schriftart fährt, ändert sich die Schriftfarbe
<style>
h1:hover{
color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>Rendering:
Dies ist die häufigste Verwendung, es ändert nur den Stil
Verwendung 2: Steuern Sie die Stile anderer Blöcke durch Hover
Diese Verwendung kann in die folgenden drei Stile unterteilt werden
(1) Steuern Sie den Stil von Unterelementen
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>Rendering:
(2) Steuern Sie den Stil von Geschwisterelementen
'+' Steuern Sie Geschwisterelemente (Geschwisterelemente)
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering :
(3) Steuern Sie den Stil von Elementen in der Nähe
'~' Steuern Sie Elemente in der Nähe
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Hover in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!