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

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モードレンダリングに対応

推薦する

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Facebookの情報アーキテクチャの分析

<br />原文: http://uicom.net/blog/?p=762 Faceb...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

Vue での Vue.prototype の使用に関する詳細な説明

目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...

HTML テーブルタグチュートリアル (21): 行の境界線の色属性 BORDERCOLOR

テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順

序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...

Vueを使用して天気コンポーネントをロードする方法の詳細な説明

この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

Dockerコンテナの自動終了を停止する方法の詳細な説明

この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明

序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...

vue WatchとComputedの使用の概要

目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...