ホームページ > 記事 > ウェブフロントエンド > マウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?
マウスを使用してウェブを閲覧するとき、私たちは常に画像の突然の変化に魅了されます。これにより、ユーザーエクスペリエンスが大幅に向上し、効率が向上します。そこで今回は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 サイトの他の関連記事を参照してください。