CSS :hover Pseudoklasse

Definition und Verwendung

CSS :hover Pseudoklassen werden verwendet, um Elemente bei der Mausüberlegung auszuwählen。

Hinweis::hover Pseudoklassen können für alle Elemente verwendet werden, nicht nur für Links。

Hinweis:Verwenden Sie :link Stellen Sie den Stil der nicht verlinkten Seiten ein, indem Sie :visited Stellen Sie den Stil der verlinkten Seiten ein, indem Sie :active Stellen Sie den Stil der aktiven Links ein。

Hinweis:In der CSS-Definition::hover muss in :link und :visitedfunktioniert erst, wenn (wenn vorhanden)!

Beispiel

Beispiel 1

Wählen und stellen Sie den Stil der Links bei der Mausüberlegung ein：

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Versuchen Sie es selbst

Beispiel 2

Wählen und stellen Sie den Stil der <p>、<h1> und <a>-Elemente bei der Mausüberlegung ein：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Versuchen Sie es selbst

Beispiel 3

Wählen und stellen Sie die Stile für nicht besuchte, besuchte, überlagerte und aktive Links ein:

/* Nichte besuchte Links */
a:link {
  color: green;
}
/* Besuchte Links */
a:visited {
  color: green;
}
/* Links bei Mausüberlagerung */
a:hover {
  color: red;
}
/* Aktive Links */
a:active {
  color: yellow;
}

Versuchen Sie es selbst

Beispiel 4

Legen Sie verschiedene Stile für Links fest:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Versuchen Sie es selbst

Beispiel 5

Bleiben Sie auf dem <span>-Element, um das <div>-Element anzuzeigen (ähnlich einem Tool-Tip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Versuchen Sie es selbst

Beispiel 6

Zeige und verstecke das "Dropdown"-Menü bei der Mausüberlagerung:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display: block !important;}
ul li ul li:hover {background: #666;}

Versuchen Sie es selbst

CSS-Syntax

:hover {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Pseudo-Klasse vollständig unterstützt.

Verwandte Seiten

Tutorial:CSS Links

Tutorial:CSS Pseudo-Klassen