CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文：

私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサブタグのスタイルのみです。良い方法があれば、ぜひアドバイスをお願いします。
他のタグの制御（制御タグと制御対象タグの関係に基づく）は、次の 3 つのタイプに分けられます。

この記事のコントロールタグは.div1です
制御タグは.div2です

1. サブタグを制御する（.div1:hover と .div2 の間にスペースを入れる）

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            .div1,.div2 {
                幅: 200ピクセル;
                高さ: 100px;
                背景色: ピンク;
            }
            .div2 {
                背景色: 水色;
                表示: なし;
            }
            .div1:ホバー .div2 {
                表示: ブロック;
            }
        </スタイル>
    </head>
    <本文>
        <div class="div1">div1
            <div class="div3">div3</div>
            <div class="div2">div2</div>
        </div>
    </本文>
</html>

制御されるタグが制御タグの子タグである限り、他のタグ (.div3 など) は効果に影響を与えません。

2. 兄弟タグを制御する（.div1:hoverと.div2の間に+を使用する）

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            .div1,.div2 {
                幅: 200ピクセル;
                高さ: 100px;
                背景色: ピンク;
            }
            .div2 {
                背景色: 水色;
                表示: なし;
            }
            .div1:ホバー+.div2 {
                表示: ブロック;
            }
        </スタイル>
    </head>
    <本文>
        <div class="div1">div1</div>
        <!-- <div class="div3">div3</div> -->
        <div class="div2">div2</div>
    </本文>
</html>

「+」を使用する場合、.div2 は .div のすぐ後ろに配置する必要があります。そうしないと効果がありません。！！たとえば、.div3 のコメントを解除すると、.div1 は .div2 のスタイルを制御できなくなります。！！制御タグと制御対象タグの間にコンテンツがある場合は、3 番目の方法で記述する必要があります。

3. 兄弟タグを制御する（コンテンツが中央にある）（.div1:hover と .div2 の間では ~ を使用する）

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            .div1,.div2 {
                幅: 200ピクセル;
                高さ: 100px;
                背景色: ピンク;
            }
            .div2 {
                背景色: 水色;
                表示: なし;
            }
            .div1:hover~.div2 {
                表示: ブロック;
            }
        </スタイル>
    </head>
    <本文>
        <div class="div1">div1</div>
        <div class="div3">div3</div>
        <div class="div2">div2</div>
    </本文>
</html>

この方法を使用するための要件は、制御タグが制御タグの下にあり、その間に任意のコンテンツが存在することができることです。

要約:

サブタグを制御する	間にスペースを入れる
すぐ後ろにある兄弟ラベルを制御します	真ん中に「+」を入れる
後続の兄弟タグを制御する	真ん中に「~」を入れる

これで、マウスをホバーしたときに他のタグのスタイルを変更する CSS の使用方法に関するこの記事は終了です。マウスをホバーしたときに他のタグのスタイルを変更する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Div CSS 命名標準 CSS クラスの命名規則 (SEO 標準に準拠)

>>: aタグ内のテキストを非表示にして画像を表示するには？360モードレンダリングに対応