CSS | hoverで子要素・親要素を指定・変更する方法

2021-11-23CSS セレクタ,CSS

マウスホバー時のスタイル適用が指定できる擬似クラス「:hover」でホバー時の対象に子要素や親要素を指定する方法とサンプルコードを紹介しています。

:hoverで子要素を指定する

:hoverで子要素を指定する実装サンプルとサンプルコードになります。

See the Pen CSS | Photo-like edging on the image by yochans (@yochans) on CodePen.

HTMLではシンプルに親要素（parent）と子要素（child）のdivタグを用意しました。

<div class="parent">
	<div class="child"></div>
</div>

:hoverで子要素を指定するには、:hoverのあとに半角スペースと指定したい子要素のセレクタを指定する事で実装可能です。

.parent {
	width: 150px;
	height: 150px;
	background: #a9a9a9;
}

.child {
	width: 100px;
	height: 100px;
	background: #b22222;
	transition: 0.5s;
}

.parent:hover .child {
	background: #4169e1;
}

:hoverで親要素を指定する

:hoverで親要素を指定にはpointer-eventsプロパティを使う事で実装可能です。

See the Pen CSS | Specify child elements with :hover by yochans (@yochans) on CodePen.

<div class="parent">
	<div class="child"></div>
</div>

pointer-eventsは:hoverやa link等のユーザーアクションによる反応を非アクティブ、アクティブに切り替える事が可能なCSSプロパティです。
SVGに対しては他にもいくつかの有効な値を有しています。

また、HTML要素においてpointer-eventsはデフォルトでautoが指定されています。

:hoverで親要素を指定する場合、親要素に対してpointer-eventsでnoneを指定し、マウスホバーを反応させたい子要素にpointer-eventsでautoを指定します。

こうする事で子要素の外の親要素内では:hoverが反応しなくなりますが、子要素内にマウスカーソルが入ると反応するようになります。

:hoverは親要素に対して指定しておきます。

.parent {
	width: 150px;
	height: 150px;
	background: #a9a9a9;
}

.child {
	width: 100px;
	height: 100px;
	background: #b22222;
}

.parent:hover .child {
	background: #4169e1;
}

:hoverで親要素を指定する（:has版）

対応している環境がないため動作テストはできていませんが、策定内容から以下のような記述になると思われます。

:hoverで親要素を指定するには、:hoverのあとに半角スペースと指定したい子要素のセレクタを指定する事で実装可能です。

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	width: 150px;
	height: 150px;
	background: #a9a9a9;
}

.child {
	width: 100px;
	height: 100px;
	background: #b22222;
}

.parent:hover .child {
	background: #4169e1;
}

また、CSS4と呼ばれるものの中のひとつに:has()というプロパティがあり、そちらでも:hoverから親要素を指定する事が可能になると思われます。

CSS4はまとめてではなく順次登場してくるものと思われますが、各ブラウザが:has()対応がされていけば、おそらく以下のようなCSSコードで実行可能かと考えています。

.parent {
	width: 150px;
	height: 150px;
	background: #a9a9a9;
}

.child {
	width: 100px;
	height: 100px;
	background: #b22222;
}

.parenta:has(> child:hover) {
	background: #4169e1;
}