ホームページ > 記事 > ウェブフロントエンド > マウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?
マウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?
- 藏色散人オリジナル
- 2018-08-06 16:42:152350ブラウズ
マウスを使用してウェブを閲覧するとき、私たちは常に画像の突然の変化に魅了されます。これにより、ユーザーエクスペリエンスが大幅に向上し、効率が向上します。そこで今回は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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。