Web制作 CSS

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

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

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

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

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

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

参考記事
【jQuery】hoverで別要素の値を変更する方法【サンプル付きで解説】
【jQuery】hoverで別要素の値を変更する方法【サンプル付きで解説】

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

  1. hoverした要素の値を変更
  2. hoverした要素の『子要素』の値を変更
  3. hoverした要素の『兄弟要素』の値を変更
  4. hoverした要素の『全ての兄弟要素』の値を変更
  5. 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です。

以上になります。

あわせて読む
【jQuery】hoverで別要素の値を変更する方法【サンプル付きで解説】
【jQuery】hoverで別要素の値を変更する方法【サンプル付きで解説】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS