Heim >Web-Frontend >CSS-Tutorial >So stellen Sie die Maus so ein, dass sie den Hintergrund in CSS ändert
So stellen Sie die Maus so ein, dass sie den Hintergrund in CSS ändert
- 藏色散人Original
- 2020-11-17 11:03:283007Durchsuche
So stellen Sie die Maus so ein, dass sie den Hintergrund mithilfe von CSS ändert: Öffnen Sie zuerst die entsprechende Front-End-Codedatei und stellen Sie dann den Stil auf „.logo-link {background-image:url(...);}.logo-“ ein. link:hover,.logo-link:active {}“ reicht aus.
Empfohlen: „CSS-Video-Tutorial“
CSS-Code zum Implementieren des Änderns des Hintergrundbilds, wenn die Maus darüber bewegt wird
Oft können wir sehen, dass das Bild zeigt, wenn wir mit der Maus darüber fahren Es wird ein anderes Bild werden. Im Folgenden werde ich den Code zur Implementierung dieser Funktion teilen, in der Hoffnung, allen zu helfen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo-link {
width:500px;
height:500px;
text-decoration:none;
display:block;
background-image:url(bj1.jpg);
background-position:0px 0;
background-repeat: no-repeat;
}
.logo-link:hover,.logo-link:active {
background-position:0 0;
background-image: url(bj2.jpg);
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="logo-link"></a>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo stellen Sie die Maus so ein, dass sie den Hintergrund in CSS ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!