マウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）-CSSチュートリアル-php.cn

マウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）

藏色散人

リリース： 2018-08-10 10:30:54

オリジナル

6260 人が閲覧しました

ウェブサイトをデザインしているときに、マウスが特定の画像に出入りするときに自動的に別の画像を覆う必要がある場合、どうすればよいでしょうか?実際、CSS コードについて少し知っている友人は、これが非常に簡単な操作であることを知っています。この記事で紹介することで初心者でも簡単に知識ポイントを理解することができます。そこで今日はCSSのマウスパス風に特定の画像を覆う特殊効果機能について詳しく紹介します。

別の画像をカバーするための CSS マウスの移動の具体的なコード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css鼠标经过样式测试</title>
</head>
<body>
<div class="div">
    <div class="img1 img">
        <img  src="1.png" alt="マウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）" >
    </div>
    <div class="img2 img">
        <img  src="2.png" alt="マウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）" >
    </div>
</div>
<style>
    .div{position:relative; width:800px; margin:auto;}
    .img{position:absolute; z-index:0;}
    .img2{left:150px; top:100px;}
    .img1:hover{z-index:1;}
</style>
</body>
</html>

ログイン後にコピー

上記の効果は以下のとおりです:

1 開いたばかりのページには次の内容が表示されます:

マウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）

2. in display もう 1 つについて説明します:

マウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）

実際、この記事の鍵は、hover 疑似クラスを使用することです。ここではcss:hoverの定義と使い方についても簡単に紹介します。

:hover 疑似クラスは、マウスがこの要素の上に移動すると、この要素に特別なスタイルを追加します。この疑似クラスは、「ホバー状態」にある要素に適用されます。ホバーは、ユーザーが要素を指定してもアクティブ化しない場合として定義されます。この最も一般的な例は、HTML ドキュメント内のハイパーリンクの範囲内でマウスポインタを移動することです。理論的には、他の要素をホバーすることもできますが、CSS はどの要素をホバーするかを定義しません。

注: すべての主要なブラウザは :hover 疑似クラスをサポートしています。

この記事が困っている友達に役立つことを願っています!

以上がマウスが出入りするときにCSSを使用して別の画像を覆うにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。