序文: 私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサブタグのスタイルのみです。良い方法があれば、ぜひアドバイスをお願いします。
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モードレンダリングに対応
目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...
<br />原文: http://uicom.net/blog/?p=762 Faceb...
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...
テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...
履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...
序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...
この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...
1. Python 3をダウンロードする https://www.python.org/ftp/py...
この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...
https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...
私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...
序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...
目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...