In CSS können der Hover-Selektor und das Farbattribut verwendet werden, um den Effekt einer Farbänderung beim Bewegen der Maus zu erzielen. Der Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt, und das Farbattribut wird verwendet, um das festzulegen Farbe beim Schweben; die Syntax „:hover {color:hover color;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So ändern Sie die Farbe von CSS beim Bewegen der Maus:
1 Öffnen Sie das HTML-Entwicklungstool und erstellen Sie eine HTML-Datei, wie im Bild gezeigt:
2. Tag auf der HTML-Seite, geben Sie den Inhalt in das Tag
ein und überdecken Sie den Inhalt dann mit dem Tag . Wie im Bild gezeigt:
3. Ändern Sie den Inhalt des -Tags und stellen Sie die Farbe auf Blau ein, wie im Bild gezeigt:
4 gleitet über die Beschriftung und die Schriftart ändert sich in Rot :a:hover{color:red} . Wie im Bild gezeigt:
5. Speichern Sie die HTML-Datei und öffnen Sie sie mit einem Browser. Wenn Sie mit der Maus über den Text fahren, werden Sie feststellen, dass sich die blaue Schriftart ändert zu roter Schrift.
6. Kopieren Sie den Code für alle implementierten Codes direkt in die HTML-Datei, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停字体变色</title>
<style type="text/css">
a{
color:blue;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="">把鼠标放到我身上</a>
</body>
</html>Hinweis: Der Hover-Selektor muss verwendet werden, um den Stil zu ändern, wenn die Maus schwebt
Hover-Selektoren werden verwendet, um das Element auszuwählen, über dem sich der Mauszeiger befindet. Der Hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links. In der CSS-Definition muss der Hover nach dem Link platziert und besucht werden (falls vorhanden), damit der Stil wirksam wird.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonCSS, wie man Mouseover dazu bringt, die Farbe zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
