Wenn wir mit der Maus im Internet surfen, werden wir immer von den plötzlichen Bildwechseln angezogen, was das Benutzererlebnis erheblich verbessert und eine höhere Effizienz mit sich bringt. In diesem Artikel wird daher hauptsächlich erläutert, wie Sie mithilfe von CSS die Bildänderung steuern können, wenn Sie mit der Maus darüber fahren.
Das spezifische Codebeispiel für CSS zur Steuerung der Bildtransformation, wenn die Maus darüber bewegt wird, lautet wie folgt:
<style type="text/css">
.demo {
width:500px;
height:400px;
text-decoration:none;
display:block;
background-image:url(1.png);
background-position:0px 0;
background-repeat: no-repeat;
}
.demo:hover,.demo:active {
background-position:0 0;
background-image: url(2.png);
}</style>
</head>
<body>
<a href="http://www.php.cn" class="demo"> </a>
</body>
Hinweis:
Der CSS :hover-Selektor wird verwendet, um das Element auszuwählen, über dem sich der Mauszeiger befindet, und kann für alle Elemente verwendet werden, nicht nur für Links.
[Empfohlene verwandte Artikel]
Dynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt wird
JS und CSS3 Beispiel für die Implementierung eines bildresponsiven Mausbewegungsvergrößerungseffekts
Das obige ist der detaillierte Inhalt vonWie steuert CSS, dass sich das Bild ändert, wenn die Maus darüber bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
