ホームページ  >  記事  >  ウェブフロントエンド  >  マウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?

マウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?

藏色散人
藏色散人オリジナル
2018-08-06 16:42:152335ブラウズ

マウスを使用してウェブを閲覧するとき、私たちは常に画像の突然の変化に魅了されます。これにより、ユーザーエクスペリエンスが大幅に向上し、効率が向上します。そこで今回は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 はどのように制御するのでしょうか?

注:

CSS :hover セレクターは、マウスが置かれている要素を選択するために使用されます。ポインタはフローティングであり、リンクだけでなくすべての要素に使用できます。

【おすすめ関連記事】

CSS3のマウス移動時の動的プロンプト効果

マウスアップアイコンの回転効果を実現するCSSの方法を詳しく解説

JSとCSS3の画像実装例応答性の高いマウス移動の拡大効果




以上がマウスが上に移動したときに画像が変化するように CSS はどのように制御するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。