CSS, wie man Mouseover dazu bringt, die Farbe zu ändern-CSS-Tutorial-php.cn

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

WBOY

Freigeben： 2021-11-10 11:53:36

Original

30303 Leute haben es durchsucht

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;}“.

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

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:

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

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:

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

3. Ändern Sie den Inhalt des -Tags und stellen Sie die Farbe auf Blau ein, wie im Bild gezeigt:

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

4 gleitet über die Beschriftung und die Schriftart ändert sich in Rot :a:hover{color:red} . Wie im Bild gezeigt:

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

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.

CSS, wie man Mouseover dazu bringt, die Farbe zu ändern

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>

Nach dem Login kopieren

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!