So verwenden Sie Hover in CSS-CSS-Tutorial-php.cn

So verwenden Sie Hover in CSS

清浅

Freigeben： 2020-10-13 09:08:32

Original

110731 Leute haben es durchsucht

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;

So verwenden Sie Hover in CSS

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>

Nach dem Login kopieren

Rendering:

So verwenden Sie Hover in CSS

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>

Nach dem Login kopieren

Rendering:

So verwenden Sie Hover in CSS

(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>

Nach dem Login kopieren

Rendering :

Image 004.png

(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>

Nach dem Login kopieren

Rendering:

Image 004.png

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!