Heim > Artikel > Web-Frontend > So verwenden Sie CSS-Hover
So verwenden Sie CSS-Hover
- 藏色散人Original
- 2020-02-06 11:49:4111611Durchsuche
Verwendung von CSS-Hover
CSS: Definition und Verwendung des Hover-Selektors
:Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.
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.
Empfohlenes Lernen: CSS-Tutorial
Hinweis: In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) stehen, damit der Stil stimmt wirksam werden kann.
Beispiel:
Wählen Sie das Element aus, auf dem der Mauszeiger schwebt, und legen Sie seinen Stil fest:
<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.php.cn">PHP</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
</body>
</html>Effekt:
Hinweis: Alle gängigen Browser unterstützen den :hover-Selektor.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Hover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!