コーディング

【CSS】hoverした時に別要素にアクションをさせる方法

投稿日:2019年9月16日 更新日:

こんにちは。今回はCSSの擬似クラスである「hover」についてかきます。

自分が勉強をはじめてまだ間もない時、hoverの設定で初めて動きをつけられて衝撃だったのを今でも覚えています。皆さんもそうではなかったでしょうか?

今回は、ある要素にhoverした時に別の要素にアクションをさせる方法をかきます。
たまにコーディングをすると、どうだっけ?ってなりがちなので、自分の備忘録としてもかきますw

今回はhover時に別要素に動作させる下記の2パターンについて解説していきます。

・ある要素の子要素にhoverアクションをさせる
・ある要素の兄弟要素にhoverアクションをさせる


子要素にアクションをさせる

今回のベースのソースが下記です。

<div class="parent">
  hover
  <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;
    .child{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 80%;
       margin: 0 auto;
       text-align: center;
       font-size: 20px;
       background-color: #fff;
       transition: all .5s;
      }
}

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

ホバー

ではhoverアクションをかいていきましょう。
水色の親要素にhoverした時に、子要素である白色の「action」のボックスを動かしたい時は下記のソースのように記載します。

.parent{

    //略

    .child{

       //略

      }
     &:hover .child{
         transform: translate(-50%, 30%);
     }
}

//CSSでは下記のように書きます。
.parent:hover .child {
  transform: translate(-50%, 30%);
}

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

hover

action

子要素actionを親要素の上下左右中央に位置させているのですが、方法は別の記事で紹介しています。よく使うのでぜひ読んでください。

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

兄弟要素にアクションをさせる

続きまして兄弟要素について説明します。
下記がベースのソースです。

<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

兄弟要素を指定する「~」は、今回の例でいうと「+」に変更しても問題なく動きます。

まとめとしては「hoverさせる要素に擬似クラス:hoverを記述、そしてアクションさせたい要素を:hover以降にセレクタで限定してあげる。」です。

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

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

セレクタについては下記でまとめています。

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

スマホでは…?

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

個人的には、スマホでhoverアクションは不要かなと思っています。指で隠れてアクション自体見れないこともありますしw

私はレスポンシブでは、PCだけhoverアクションをつけてSPでは抜いています。

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

今回は以上となります。
また忘れそうなことを書きます。

では!

【おすすめ記事】プログラミングを独学で始めて3年間の成長ログ

-コーディング
-, , , ,

執筆者:

関連記事

CSS

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

子要素を親要素の上下左右中央に持ってくる方法を書きました。
様々な方法があるのですが、個人的には今回紹介する方法がベストではないかと思います。参考になれば幸いです。

CSS

【CSS】repeating-linear-gradient 背景に格子・ストライプを表現する

コンテンツ背景に格子状のデザインやストライプのデザインを背景に引く方法をお教えします。

CSS

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

CSS小技集。勉強しててイイなと思ったテクを共有します。

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

CSS

【CSS】 first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。<後編>

今回はセレクタ解説の後編です。first-child,last-child,nth-of-type,,,などなど

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。