マウスを使用してウェブを閲覧するとき、私たちは常に画像の突然の変化に魅了されます。これにより、ユーザーエクスペリエンスが大幅に向上し、効率が向上します。そこで今回はCSSを使ってマウスオーバー時の画像の変化を制御する方法を中心に紹介しますので、困っている方は参考にしてみてください。
マウスポインターが上に移動したときの画像変形を制御する CSS の具体的なコード例は次のとおりです:
<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>
注:
CSS :hover セレクターは、マウスが置かれている要素を選択するために使用されます。ポインタはフローティングであり、リンクだけでなくすべての要素に使用できます。
【おすすめ関連記事】
マウスアップアイコンの回転効果を実現するCSSの方法を詳しく解説
以上がマウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
