kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

コーディング

【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では抜いています。

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

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

では!

っと最後に、今回の内容のようにHTMLとCSSの基本&応用を満遍なく解説してくれているテキストを紹介します。
自分が勤めている会社内にも置いていて、新人にはマストでインプットで使ってもらうテキストです。
今回の記事のコーディングレベルに不安がある方は是非🤟↓↓


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

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

執筆者:

関連記事

CSS

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

CSSでテキストにアンダーラインを引く方法をいくつか紹介します。普通の下線、太線、マーカー風の下線まで表現できる実装をまとめました。ブログやLP制作で、ユーザーの目線を奪うことは重要です。それにはテキストを際立たせる必要になる時があります。そんな時の為にアンダーラインの理解を深めましょう。

sass

SCSSの基礎

SCSSの基本をまとめてみました。CSSで書くよりかなりスピードアップしますし、記述場所も明確でわかりやすくなります。

CSS

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

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

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

CSS

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

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

me

Taka

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