親要素ホバー時の子要素スタイル変更
CSSで親要素にホバーしたときに子要素のスタイルを変更する方法
日本語解説
CSSでは、親要素にホバー（マウスオーバー）したときに、その子要素のスタイルを変更することができます。これにより、インタラクティブなユーザーインターフェイスを作成することができます。
基本的な構文
parent-selector:hover > child-selector {
/* 子要素のスタイル */
}
> child-selector: 親要素の直接の子要素を指定します。:hover: 親要素にホバーしたときに適用されます。parent-selector: 親要素のセレクターです。
例
<div class="parent">
<p>子要素のテキスト</p>
</div>
.parent:hover > p {
color: red;
font-weight: bold;
}
この例では、.parentクラスを持つ親要素にホバーしたときに、その直接の子要素である<p>タグのテキストの色を赤にし、フォントを太字にします。
>セレクター以外：（スペース）や+、~などのセレクターを使用して、異なる子要素の選択方法があります。>セレクター：直接の子要素を指定します。- 子要素の階層：直接の子要素だけでなく、孫要素やさらに深い階層の子要素もスタイルを変更することができます。
親要素にホバーしたときの子要素のスタイル変更：コード例解説
コード例1：基本的な例
.parent:hover > p {
color: red;
font-weight: bold;
}
font-weight: bold;: 文字を太字にします。color: red;: 文字の色を赤色に設定します。p:<p>タグを指定します。>: 直接の子要素を指定します。つまり、.parentのすぐ内側にある<p>タグを対象にします。.parent:hover: クラス名がparentの要素にマウスが重ねられた（ホバーした）状態を表します。
動作
このコードは、.parentクラスを持つ要素にマウスを合わせると、その要素内の<p>タグの文字が赤色で太字になります。
コード例2：複数の子要素にスタイルを適用
.parent:hover > * {
background-color: lightgray;
}
background-color: lightgray;: 背景色を薄い灰色に設定します。
コード例3：孫要素へのスタイル適用
.parent:hover .child {
border: 2px solid blue;
}
.child: クラス名がchildの要素を指定します。これは、.parentの直接の子要素だけでなく、孫要素も対象にすることができます。
このコードは、.parentクラスを持つ要素にマウスを合わせると、その要素内にあるクラス名がchildのすべての要素（直接の子要素、孫要素など）に青い枠線が付きます。
コード例4：兄弟要素へのスタイル適用（隣接セレクター）
.parent:hover + .sibling {
color: green;
}
+ .sibling:.parentの直後の兄弟要素であるクラス名がsiblingの要素を指定します。
このコードは、.parentクラスを持つ要素にマウスを合わせると、その直後の兄弟要素であるクラス名がsiblingの要素の文字色が緑色になります。
.parent:hover ~ .sibling {
font-size: 1.2em;
}
これらのコード例は、親要素にホバーしたときに子要素のスタイルを変更する基本的な方法を示しています。>、*、+、~などのセレクターを使い分けることで、様々な状況に対応することができます。
ポイント
- ブラウザの互換性
すべてのブラウザで同じように動作することを確認する必要があります。 - CSSの優先順位
複数のスタイルが適用される場合、CSSの優先順位によってスタイルが決定されます。 - セレクターの組み合わせ
複数のセレクターを組み合わせることで、より複雑な条件でスタイルを適用することができます。
これらの知識を活かして、インタラクティブなWebサイトを作成してみてください。
より詳しく知りたい場合は、以下のキーワードで検索してみてください。
- CSS 優先順位
- CSS セレクター 組み合わせ
- 親要素 セレクター
- CSS ホバー
親要素ホバー時の子要素スタイル変更：代替方法
JavaScriptを使った動的なスタイル変更
CSSだけでは表現できない複雑な動きや、ユーザーの操作に連動したスタイル変更を行う場合、JavaScriptを用いる方法があります。
const parentElement = document.querySelector('.parent');
const childElements = parentElement.querySelectorAll('p');
parentElement.addEventListener('mouseover', () => {
childElements.forEach(child => {
child.style.color = 'red';
child.style.fontWeight = 'bold';
});
});
parentElement.addEventListener('mouseout', () => {
childElements.forEach(child => {
child.style.color = 'black';
child.style.fontWeight = 'normal';
});
});
このコードでは、JavaScriptのイベントリスナーを使って、親要素にマウスが乗った時（mouseover）と離れた時（mouseout）に、子要素のスタイルを動的に変更しています。
メリット
- ユーザーの操作に連動したインタラクティブな表現が可能
- CSSだけでは表現できない複雑な動きが可能
- ブラウザの互換性やパフォーマンスに注意が必要
- コード量が増える
CSS変数を使った動的なスタイル変更
CSS変数を使うことで、JavaScriptを使わずに、より柔軟なスタイルの変更が可能になります。
:root {
--child-color: black;
--child-font-weight: normal;
}
.parent:hover {
--child-color: red;
--child-font-weight: bold;
}
.parent p {
color: var(--child-color);
font-weight: var(--child-font-weight);
}
このコードでは、CSS変数を使って、子要素の色とフォントウェイトを定義しています。親要素にホバーした際に、CSS変数の値を変更することで、子要素のスタイルを動的に変更しています。
- CSSだけで完結するため、コードが読みやすくなる
- ブラウザのサポート状況を確認する必要がある
CSSの擬似クラスを使ったより細かい制御
CSSの擬似クラスを組み合わせることで、より細かい制御が可能になります。
.parent:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
このコードでは、親要素にホバーした際に、擬似要素::beforeを使って、親要素全体を覆う半透明のレイヤーを表示しています。
- CSSフレームワーク
BootstrapやBulmaなどのCSSフレームワークを使うことで、あらかじめ定義されたスタイルを簡単に利用できます。 - CSSプリプロセッサ
SassやLessなどのCSSプリプロセッサを使うことで、より効率的にCSSを書くことができます。
親要素にホバーしたときの子要素のスタイル変更には、CSS、JavaScript、CSS変数など、様々な方法があります。それぞれの方法にメリットとデメリットがあり、どのような表現を実現したいかによって最適な方法が変わってきます。
選択のポイント
- ブラウザのサポート
CSS変数や新しいCSS機能は、すべてのブラウザでサポートされているわけではない - パフォーマンス
JavaScriptを使うとパフォーマンスが低下する可能性がある - コードの可読性
CSS変数やCSSプリプロセッサを使うことで、コードの可読性を高めることができる - 表現の複雑さ
複雑な動きやインタラクションが必要な場合はJavaScript、シンプルなスタイル変更であればCSS
これらの点を考慮して、最適な方法を選択してください。
- Bootstrap Bulma
- Sass Less
- CSS 擬似クラス
- CSS 変数
- JavaScript イベントリスナー
css css-selectors
