【CSSチュートリアル】親要素ホバーで子要素をスタイリング！サンプルコードで分かりやすく解説
2024-07-27
CSSで親要素のホバー時に子要素をスタイル変更する方法
基本的な方法
最も基本的な方法は、以下のコードのように :hover 擬似クラスを親要素に適用し、その中に記述する子要素のスタイルを定義することです。
/* 親要素 */
.parent {
background-color: #f0f0f0;
}
/* 親要素ホバー時 */
.parent:hover {
background-color: #ccc;
}
/* 子要素 */
.parent .child {
color: #333;
}
/* 親要素ホバー時の子要素 */
.parent:hover .child {
color: #000;
}
この例では、 .parent 要素がホバーされると背景色が青色に変化し、同時にその中に含まれる .child 要素の文字色が黒色に変化します。
ポイント:
- 親要素と子要素のセレクタを繋げずに記述することで、直下の子要素のみにスタイルが適用されます。
- 複数のホバー効果を適用したい場合は、カンマ区切りで記述できます。
.parent:hover .child,
.parent:hover .another-child {
/* スタイル */
}
擬似要素と組み合わせる方法
擬似要素を用いることで、より複雑なホバー効果を作成することができます。例えば、以下のように ::before 擬 pseudo-element を使用して、親要素ホバー時に子要素の下にボーダーを表示することができます。
/* 親要素 */
.parent {
position: relative; /* 擬似要素を配置するために必要 */
}
/* 子要素 */
.parent .child {
/* ... */
}
/* 親要素ホバー時の擬似要素 */
.parent:hover::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
opacity: 0.5;
transition: opacity 0.3s;
}
position: relativeを親要素に設定することで、擬似要素を配置するための基点となる位置を指定します。content: ""を設定することで、擬似要素にコンテンツを表示せずに装飾のみを適用します。opacityプロパティで透明度を調整することで、滑らかなアニメーション効果を作成できます。
:hover擬似クラス以外にも、:activeや:focusなどの擬似クラスを使用して、子要素のスタイルを変化させることができます。- JavaScriptと組み合わせることで、より高度なインタラクションやアニメーションを作成することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hover Effect</title>
<style>
/* 親要素 */
.parent {
background-color: #f0f0f0;
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
text-align: center;
}
/* 子要素 */
.parent .child {
display: inline-block;
margin: 10px;
padding: 10px;
background-color: #fff;
color: #333;
border: 1px solid #ccc;
cursor: pointer;
}
/* 親要素ホバー時 */
.parent:hover {
background-color: #ccc;
}
/* 親要素ホバー時の子要素 */
.parent:hover .child {
background-color: #eee;
color: #000;
}
</style>
</head>
<body>
<div class="parent">
<span class="child">ボタン</span>
<span class="child">リンク</span>
</div>
</body>
</html>
このコードを実行すると、以下のようになります。
- このコードは、HTMLとCSSで構成されています。
- 親要素には
parentクラス、子要素にはchildクラスが設定されています。 :hover擬似クラスを使用して、親要素と子要素のホバー時のスタイルを定義しています。- この例では、シンプルなボタンとリンク風のスタイルを適用していますが、自由にデザインを変更することができます。
:not() 擬似クラスを使用する
目的: 特定の子要素を除いて、他のすべての子要素にスタイルを適用したい場合
例:
/* 親要素 */
.parent {
/* ... */
}
/* 親要素ホバー時の子要素（.not-targetを除く） */
.parent:hover .child:not(.not-target) {
/* スタイル */
}
この例では、 .parent 要素がホバーされると、すべての子要素のスタイルが変更されますが、 .not-target クラスを持つ子要素は除外されます。
:nth-child() 擬偶数セレクタを使用する
目的: 特定のインデックスの子要素にのみスタイルを適用したい場合
/* 親要素 */
.parent {
/* ... */
}
/* 親要素ホバー時の2番目の子要素 */
.parent:hover .child:nth-child(2) {
/* スタイル */
}
この例では、 .parent 要素がホバーされると、2番目の子要素のみスタイルが変更されます。
JavaScriptを使用する
目的: より高度なインタラクションやアニメーションを作成したい場合
const parent = document.querySelector('.parent');
const children = parent.querySelectorAll('.child');
parent.addEventListener('mouseover', () => {
children.forEach(child => {
child.style.backgroundColor = '#eee';
child.style.color = '#000';
});
});
parent.addEventListener('mouseout', () => {
children.forEach(child => {
child.style.backgroundColor = '#fff';
child.style.color = '#333';
});
});
この例では、JavaScriptを使用して、 .parent 要素がホバーされるとすべての子要素の背景色と文字色が変更され、マウスアウトすると元の色に戻ります。
ライブラリを使用する
目的: より簡単に複雑なホバー効果を作成したい場合
<script src="https://unpkg.com/hover.css@latest/dist/hover.min.css"></script>
上記のコードは、Hover.cssというライブラリをロードします。このライブラリを使用すると、様々なホバー効果を簡単に適用することができます。
css css-selectors
