【CSS】hoverで別要素の値を変更する方法【子要素・兄弟要素・親要素】

hoverで別の要素の値を変更することって出来る？

基本的にはhoverして要素の値を変更するのは『hoverした要素』だと思いますが、それ以外の要素にしたい場合もあります。

例えばhoverした要素の『子要素・兄弟要素・親要素』など。

そこで今回はCSSのみでこれらを実装する方法を解説していきます。

もし『子要素・兄弟要素・親要素』以外の離れた要素の値を変更したい場合は、以下の記事を参照下さい。

CSSを使ってhoverで別要素の値を変更する方法【子要素・兄弟要素・親要素】

今回は基本も含めて4種類のhoverを解説していきます。

hoverした要素の値を変更
hoverした要素の『子要素』の値を変更
hoverした要素の『兄弟要素』の値を変更
hoverした要素の『全ての兄弟要素』の値を変更
hoverした要素の『親要素』の値を変更

それでは1つずつ解説していきますがコードについては見やすくする為にポイントとなるものだけ書くので、全部見たい人は左上の『HTML・CSS』をクリックして下さい。

hoverした要素の値を変更

まずは基本となる『hoverした要素の値を変更』がこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

コードはこちらです。

<div class="box"></div>

.box {
  background-color: #1cb4d3;
}
/* hover */
.box:hover {
  background-color: #7fffd4; /* hoverした時の背景色 */
}

これは至ってシンプルで、以下のようになります。

要素名:hover {
  hover時のスタイル
}

今回の例ではhover前と後で背景色を変えています。

じんわり色を変化させているのはtransitionを使っているからです（詳細は左上の『HTML・CSS』をクリックして下さい）

hoverした要素の『子要素』の値を変更

今度は『hoverした要素の子要素の値を変更』となります。

グレーの部分が親要素なので、グレーの部分をhoverすると水色の子要素の色が変化します。

See the Pen
CSSでhover（子要素の値を変更） by junpei (@junpei-sugiyama)
on CodePen.

コードはこちらです。

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

.parent {
  background-color: #dcdcdc; /* 親要素の背景色 */
}
.child {
  background-color: #1cb4d3; /* 子要素の背景色 */
}
/* hover */
.parent:hover .child {
  background-color: #7fffd4; /* 親要素をhoverした時の子要素の背景色 */
}

これは以下のようになります。

親要素名:hover 子要素名 {
  親要素hover時の子要素のスタイル
}

注意点としては:hoverと子要素名の間に半角スペースを入れることくらいです（くっつけるとNG）

hoverした要素の『兄弟要素』の値を変更

今度は『hoverした要素の兄弟要素の値を変更』となります。

グレーの部分をhoverすると水色の兄弟要素の色が変化します。

See the Pen
CSS：hover（兄弟要素の値を変更） by junpei (@junpei-sugiyama)
on CodePen.

コードはこちらです。

<div class="brothers01">hoverする</div>
<div class="brothers02"></div>

.brothers02 {
  background-color: #1cb4d3;
}
/* hover */
.brothers01:hover + .brothers02 {
  background-color: #7fffd4;
}

これは以下のようになります。

/* hover */
hoverする要素名:hover + hoverする要素の兄弟要素名 {
  hoverした要素の兄弟要素のスタイル
}

兄弟要素と書いていますが、単に『隣の要素』ではなく『要素の直後』となります。

つまり今回の例では.brothers02をhoverして.brothers01のスタイルを変更は出来ません。

直後ではなく直前の要素のスタイルを変えたい場合はjQueryなどを使うかと思います。

hoverした要素の『全ての兄弟要素』の値を変更

今度は『hoverした要素の全ての兄弟要素の値を変更』となります。

先ほどは『直後の要素』だったので、3番目以降は対象外でした。

グレーの部分をhoverすると水色の全ての兄弟要素の色が変化します。

See the Pen
CSS：hover（全ての兄弟要素の値を変更） by junpei (@junpei-sugiyama)
on CodePen.

コードはこちらです。

<div class="brothers01">hoverする</div>
<div class="brothers brothers02"></div>
<div class="brothers brothers03"></div>

.brothers01 {
  background-color: #dcdcdc;
}
.brothers02,
.brothers03 {
  background-color: #1cb4d3;
}
/* hover */
.brothers01:hover ~ .brothers {
  background-color: #7fffd4;
}

先ほどの『直後の要素』の場合は『 + 』を使いましたが、今回は『 ~ 』となります。

『 + 』が隣接セレクタと言って要素の直後を指定するセレクタに対し、『 ~ 』は間接セレクタと言って基準の要素以降で条件に合う全ての兄弟要素を指定するセレクタになります。

今回の場合は2つ目と3つ目に.brothersを付けているので、『 ~ 』のあとは.brothersと書いています。

なので先ほどの『直後の要素』の場合でも.brothersを付けていて『 ~ 』を使えば同じ結果になります。

また今回は基準の要素移行の兄弟要素は全て.brothersが付いていますが、2つ目を外した場合は3つ目しか変わりません。

See the Pen
CSS：hover（全ての兄弟要素の値を変更：2つ目がpタグ） by junpei (@junpei-sugiyama)
on CodePen.

hoverした要素の『親要素』の値を変更

今度は『hoverした要素の親要素の値を変更』となります。

グレーの部分が子要素なので、グレーの部分をhoverすると水色の親要素の色が変化します。

See the Pen
CSS：hover（親要素の値を変更） by junpei (@junpei-sugiyama)
on CodePen.

コードはこちらです。

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

.parent {
  background-color: #1cb4d3; /* 親要素の背景色 */
  pointer-events: none;
}
.child {
  background-color: #dcdcdc; /* 子要素の背景色 */
  pointer-events: auto;
}
/* hover */
.parent:hover {
  background-color: #7fffd4; /* 子要素をhoverした時の親要素の背景色 */
}

ここで見慣れないかも知れないプロパティpointer-eventsというのが出てきます。

これはhoverやクリックなど、カーソルのアクションを無効化することが出来るプロパティです。

初期値はpointer-events: auto;となっており、hoverやクリックは有効ですが、pointer-events: none;にすると無効になります。

そこで今回はまず親要素にpointer-events: none;を設定します。

すると子要素もpointer-events: none;になりますが、子要素はhoverを有効にしたいのでpointer-events: auto;を設定します。

こうする事で、子要素のみhoverが有効になります。

そしてhover自体は親要素に指定すればOKです。

以上になります。

投げ銭で応援する🐶