So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern-CSS-Tutorial-php.cn

So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern

WBOY

Freigeben： 2021-11-18 09:31:06

Original

11566 Leute haben es durchsucht

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);}" .

So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern

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>

Nach dem Login kopieren

Wenn die Maus nicht auf dem Bild platziert ist, ist das Ausgabeergebnis wie folgt:

So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern

Wenn die Maus auf dem Bild platziert ist, ist das Ausgabeergebnis wie folgt :

So implementieren Sie den Mauszeiger, um Bilder in CSS zu ändern

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!