【裏技】CSSでhover時に別要素を変更する【子｜兄弟｜親】

記事内に広告を含みます

パソ君

・CSSでhover時に別要素を変更するには？

こんな疑問にお答えします。

CSSでホバーアクションを実装することはよくありますよね。

通常、ホバーした要素そのものに対して行うかと。

ですが子要素に対して、親要素に対してアクションを実装したい場合もあるはず。

実はそれCSSのみで簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「CSSでhover時に別要素を変更する」について解説していきます！

この記事でわかること

CSSでhover時に別要素を変更する

CSSでhoverした要素を変更
【裏技】CSSでhover時に子要素を変更する
【裏技】CSSでhover時に兄弟要素を変更する
- 全兄弟要素を変更したい場合
【裏技】CSSでhover時に親要素を変更する
【裏技】CSSでhover時に別要素を変更する【子｜兄弟｜親】：まとめ

CSSでhoverした要素を変更

まず通常通り、ホバーした要素そのものに対して変更したサンプルがこちら↓

See the Pen CSSでhover時に別要素を変更する➀ by jito-coder (@jito-coder) on CodePen.

.box {
    background-color: #000066;
    transition: background-color .5s ease;
}

// ホバーアクション
.box:hover {
    background-color: pink;
}

ホバーした要素に対して、背景色が変更するようにしています。

記述方法は下記ですね。

要素:hover {
    // 変更したいスタイル
}

【裏技】CSSでhover時に子要素を変更する

See the Pen CSSでhover時に別要素を変更する➁ by jito-coder (@jito-coder) on CodePen.

紺色の親要素部分をホバーしたら、グレーの子要素の背景色が変わりますよね。

<div class="box02">
    <div class="box02__child">
        子要素
    </div>
</div>

// 親要素
.box02 {
    background-color: #000066;
}

// 子要素
.box02__child {
    background-color: #ccc;
    transition: background-color .5s ease;
    cursor: pointer;
}

// ホバーアクション
.box02:hover .box02__child {
    background-color: pink;
}

記述方法はこちら↓

親要素:hover 子要素 {
    // 変更したいスタイル
}

「親要素をホバーしたら、子要素のスタイルを〇〇に変更する」という意味になります。

ジト

:hoverと子要素の中に、半角スペースを入れるのを忘れずに！

【裏技】CSSでhover時に兄弟要素を変更する

See the Pen CSSでhover時に別要素を変更する➂ by jito-coder (@jito-coder) on CodePen.

紺色背景色部分をホバーしたら、下直後にある兄弟要素のグレーがピンク背景色になりますよね。

<div class="box03--01">
    兄弟要素➀
</div>
<div class="box03--02">
    兄弟要素➁
</div>

// 兄弟要素➀
.box03--01 {
    background-color: #000066;
}

// 兄弟要素➁
.box03--02 {
    background-color: #ccc;
    transition: background-color .5s ease;
    cursor: pointer;
}

// ホバーアクション
.box03--01:hover + .box03--02 {
    background-color: pink;
}

記述方法はこちら↓

兄弟要素➀:hover + 兄弟要素➁ {
    // 変更したいスタイル
}

「+」を使用します。

「兄弟要素➀をホバーしたら、直後に隣接する兄弟要素➁のみ、スタイルを〇〇に変更する」という意味。

直後の要素のみ。。です。
ここが注意点。

全兄弟要素を変更したい場合

全兄弟要素を変更する場合は、下記サンプルのようになります。

See the Pen CSSでhover時に別要素を変更する➂ by jito-coder (@jito-coder) on CodePen.

兄弟要素➀をホバーしたら、兄弟要素➁～➃全ての背景色が変更しますよね。

<div class="box04--01">
    兄弟要素➀
</div>
<div class="box04--02 box-brother">
    兄弟要素➁
</div>
<div class="box04--03 box-brother">
    兄弟要素➂
</div>
<div class="box04--04 box-brother">
    兄弟要素➃
</div>

// 兄弟要素➀
.box04--01 {
    background-color: #000066;
}
// 兄弟要素➁
.box04--02 {
    background-color: #ccc;
}
// 兄弟要素➂
.box04--03 {
    background-color: #008bad;
}
// 兄弟要素➃
.box04--04 {
    background-color: #b60000;
}
// ホバーアクション
.box04--01:hover ~ .box-brother {
    background-color: pink;
}

述方法はこちら↓

兄弟要素➀:hover ~ 兄弟要素共通クラス {
    // 変更したいスタイル
}

「~」を使用します。

「兄弟要素➀をホバーしたら、間接する兄弟要素全てに対して、スタイルを〇〇に変更する」という意味。

「+」は隣接直後のみ。
「~」は隣接する共通要素全て。という感じです。

【裏技】CSSでhover時に親要素を変更する

最後に子要素をホバーしたら、親要素が変更するサンプルを紹介します。

See the Pen CSSでhover時に別要素を変更する➄ by jito-coder (@jito-coder) on CodePen.

グレーの子要素をホバーしたら、親要素の紺色がピンク背景色に変わりますよね。

<div class="box05">
    <div class="box05__child">
        子要素
    </div>
</div>

// 親要素
.box05 {
    background-color: #000066;
    pointer-events: none;
}
// 子要素
.box05__child {
    background-color: #ccc;
    pointer-events: auto;
}
// ホバーアクション
.box05:hover {
    background-color: pink;
}

述方法はこちら↓

親要素 {
    // カーソルアクションを無効に
    pointer-events: none;
}

子要素 {
    // カーソルアクションを有効に
    pointer-events: auto;
}

親要素:hover {
    background-color: pink;
}

親要素は「pointer-events」を無効に。
子要素は「pointer-events」を有効に。

こうすることで「子要素をホバーした時のみに、親要素へのホバーによる変更が有効になる」実装ができます。