こんにちは。今回はCSSの擬似クラスである「hover」についてかきます。
自分が勉強をはじめてまだ間もない時、hoverの設定で初めて動きをつけられて衝撃だったのを今でも覚えています。皆さんもそうではなかったでしょうか？
今回は、ある要素にhoverした時に別の要素にアクションをさせる方法をかきます。
たまにコーディングをすると、どうだっけ？ってなりがちなので、自分の備忘録としてもかきますw
今回はhover時に別要素に動作させる下記の２パターンについて解説していきます。
・ある要素の子要素に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してみてください。↓↓
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させる要素に擬似クラス:hoverを記述、そしてアクションさせたい要素を:hover以降にセレクタで限定してあげる。」です。
//親にhover時に子にアクションさせる（半角スペースで要素を限定）
.parent:hover .child {
transform: translate(-50%, 30%);
}
//ある要素にhover時にその兄弟にアクションさせる（「~」で要素を限定）
.bros-01:hover ~ .bros-02{
background-color: lightgreen;
}セレクタについては下記でまとめています。
⇨【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。＜前編＞スマホでは…?
hoverアクションはPCでは自分が思った通りに動かせるのですが、スマホになると、トリガーのタイミングだったり、２回タップしないとリンク先に飛ばなかったりすることがあります。
個人的には、スマホでhoverアクションは不要かなと思っています。指で隠れてアクション自体見れないこともありますしw
私はレスポンシブでは、PCだけhoverアクションをつけてSPでは抜いています。
ここに関しては意見が分かれるところですので、柔軟に判断していただければと思います。
今回は以上となります。
また忘れそうなことを書きます。
では！
っと最後に、今回の内容のようにHTMLとCSSの基本＆応用を満遍なく解説してくれているテキストを紹介します。
自分が勤めている会社内にも置いていて、新人にはマストでインプットで使ってもらうテキストです。
今回の記事のコーディングレベルに不安がある方は是非🤟↓↓
【おすすめ記事】プログラミングを独学で始めて３年間の成長ログ
