CSS スキルアップ

【CSS】hoverで子要素や兄弟要素などの別要素にアクションをさせる方法

CSSのhoverでhoverした要素とは別の要素でアクションをさせたいんやけど、どうしたらいいんだろ？🤔


自分が勉強をはじめてまだ間もない時、CSSの擬似クラスの:hoverで初めて動きをつけられて感動したのを覚えています。
今回はある要素にhoverをした時に子要素、兄弟要素などの別の要素にアクションをさせる方法を解説します。

今回は下記の２パターンについて解説していきます。

①hover時にその子要素にアクションをさせる
②hover時にその兄弟要素にアクションをさせる

では詳しく解説していきます。

hover時にその子要素にアクションをさせる

今回使用するベースのHTMLとCSSのソースが下記です。

<div class="parent">
  <p class="child">action</p>
</div>
.parent {
        position: relative;
        background-color: lightblue;
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
        font-size: 20px;
        text-align: center;
      }

.parent .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        text-align: center;
        font-size: 20px;
        background-color: #fff;
        transition: all 0.5s;
      }

上記の実装結果は下記の画像のようになります。

親要素に対して子要素をど真ん中に来るようにしています。

あわせて読みたい

【CSS】子要素を親要素内で上下左右中央寄せさせる方法

続きを見る

ではこの子要素である白色の「action」にhover時にアクションがされるように記述していきます。
今回は親要素にhoverした時に子要素が下にいくアクションを実装します。

.parent{

    //略

}
.parent .child{

    //略

}
.parent:hover .child {
    transform: translate(-50%, -10%);
}

では水色のボックスにhoverしてみてください。↓↓

action

うまく動きましたね。
結論として擬似クラスの:hoverを親要素に設定すればOKですね。

ルールはこちら↓

親要素:hover 子要素 { アクション内容 }

hover時にその兄弟要素にアクションをさせる

続きまして兄弟要素にアクションさせる方法について説明します。
下記がベースのHTMLとCSSのソースです。

<div class="bros-01">
  hover
</div>
<div class="bros-02">
  bros
</div>
.bros-01{
  background-color: lightblue;
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  font-size: 20px;
  text-align: center;
}
.bros-02{
  background-color: lightpink;
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  font-size: 20px;
  text-align: center;
  transition: all .5s;
}

このような形です。

兄弟

今回は水色の親要素にhoverした時に、兄弟要素であるピンクの「bros」にアクションをさせていきます。
記述は下記になります。

.bros-01{
    //略
}
.bros-02{
   //略
}
.bros-01:hover ~ .bros-02{
   background-color: lightgreen;
}

水色のボックスにhoverしてみてください。

hover
bros

兄弟要素を指定する「~」は、今回の例でいうと「+」に変更しても問題なく動きます。
兄弟要素を指定するセレクタを自由に使えれば、並列になっているどの兄弟要素に対してもアクションをさせることができます。
【関連記事】兄弟要素で最初の要素、n番目の要素を指定できる頻出擬似クラス６つ

子要素関連のセレクタはこちらにまとめています
【関連記事】複数、子孫、子、隣接…忘れがちなセレクタをまとめました。＜前編＞

スマホでは...?

hoverアクションはPCでは自分が思った通りに動かせるのですが、スマホになるとトリガーのタイミングだったり、２回タップしないとリンク先に飛ばなかったりすることがあります。

個人的には指で隠れてアクション自体見れないこともあるので、スマホでhover設定は不要かなと思っています。
実際スマホに実装しているサイトは少なく、私はレスポンシブデザインで実装するときはではPCだけhoverアクションをつけてSPでは抜いています。

ここに関しては意見が分かれるところですので、柔軟に判断していただければと思います。

まとめ

今回はある要素にhoverした時に別要素である子要素と兄弟要素にアクションをさせる方法を解説しました。
２例に共通するルールは下記になります。

hoverする要素:hover アクションさせたい要素 { アクション内容 }

今回の例で言うとこれですね↓↓

//親にhover時に子にアクションさせる（半角スペースで要素を限定）
.parent:hover .child {
  transform: translate(-50%, 30%);
}

//ある要素にhover時にその兄弟にアクションさせる（「~」で要素を限定）
.bros-01:hover ~ .bros-02{
   background-color: lightgreen;
}

以上です！
ほな！

あわせて読みたい

【2024最新Udemy】Web開発フロントエンドにおすすめ講座10選！Web制作初心者中級者向け

続きを見る

知って得する

【30代未経験】エンジニア転職に必要なスキルと入社後の業務を元エンジニア採用担当が解説します

続きを見る

-CSS, スキルアップ
-, ,