Heim > Artikel > Web-Frontend > So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern
So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern
- WBOYOriginal
- 2021-11-18 09:31:0611524Durchsuche
In CSS können Sie den Pseudoklassenselektor „:hover“ und das Hintergrundattribut verwenden, um den Effekt zu erzielen, das Bild durch Bewegen der Maus zu ändern. Die Syntax lautet „Bildelement:hover{Hintergrund:URL“ (der Pfad zu Zeigt das Bild an, nachdem die Maus darüber schwebt);}" .
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS-Maus-Hover ändert das Bild
Die Verwendung der :hover-Pseudoklasse in CSS kann diesen Effekt erzielen. Der :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.
Tipps: Der :link-Selektor legt den Stil von Links fest, die auf Seiten verweisen, die nicht besucht wurden. Der :visited-Selektor wird zum Setzen von Links zu Seiten verwendet, die besucht wurden, und der :active-Selektor wird für aktive Links verwendet.
Hinweis: In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) platziert werden, damit der Stil wirksam wird.
Schauen wir uns ein Beispiel an:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style type="text/css">
div{
width:350px;
height:250px;
background:url(1118.01.png);
}
div:hover{
background:url(1118.02.png);
}/*鼠标经过*/
</style>
<body>
<div> </div>
</body>
</html>Wenn die Maus nicht auf dem Bild platziert ist, ist das Ausgabeergebnis wie folgt:
Wenn die Maus auf dem Bild platziert ist, ist das Ausgabeergebnis wie folgt :
Damit ist das Bewegen der Maus zum Ändern des Bildes abgeschlossen.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!