- 2023.03.03
- CSS
- GIV_wataru
hoverで子要素、孫要素、兄弟要素の値を変更する方法
ボタンのホバー時に色を反転させるために「hover」を使う機会は多いですよね。このhoverですが、子要素や孫要素などの値を変更したいというケースがあります。ということで今回はhoverを使って、子要素、孫要素などの値を変更する方法について解説します。
子要素の値を変更する方法
<button class="contact_btn"> <div class="contact_btn_text">お問い合わせは<br>こちら</div> </button>
.contact_btn:hover .contact_btn_text { color: #E1A83E; }
子要素の値を変更するには、「.(親要素):hover .(子要素)」で設定可能です。
孫要素の値を変更する方法
上記の画像では孫要素の「arrow_icon」の色を変えています。孫要素の値の変更は、さきほどの子要素を変更する方法では行えません。
<button class="contact_btn"> <div class="contact_arrow_icon_box"> <div class="arrow_icon"></div> </div> <div class="contact_btn_text">お問い合わせは<br>こちら</div> </button>
.contact_btn { &:hover .contact_arrow_icon_box .arrow_icon { border-color: #E1A83E; }
孫要素を変更するには記述が少し複雑になります。「親要素{&:hover .(子要素) .(孫要素)}」というように子要素を繋げながら孫要素を記載すると、孫要素の値を変更できます。
兄弟要素の値を変更する方法
<ul class="box_list"> <li class="box1"></li> <li class="box2"></li> <li class="box3"></li> </ul>
.box1:hover~.box2 { background-color: rgb(178, 243, 178); }
兄弟要素の変更は、「.親要素:hover~.(兄弟要素){}」の記述で変更できます。
上記のように、すべての兄弟要素の値を変更したい場合は、下記のように共通のクラスを兄弟要素に付与します。
<ul class="box_list"> <li class="box1 box"></li> <li class="box2 box"></li> <li class="box3 box"></li> </ul>
そして下記のように共通のクラスを「.親要素:hover~.(兄弟要素)」と記述すれば、すべての兄弟要素の値の変更が可能です。
.box1:hover~.box { background-color: rgb(154, 248, 154); }
子要素から親要素の値を変更する方法
親要素ではなく、子要素をホバーすると親要素の色を変更する方法もあります。
<div class="box_parent"> <div class="box_child"></div> </div>
.box_parent { pointer-events : none; } .box_child { pointer-events : auto; } .box_parent:hover { background-color: #e664c5; }
ここではpointer-events : none;、pointer-events : auto;というプロパティを使って、ホバー時の色の変更を制御しています。pointer-events : none;はホバーアクションを停止するプロパティで、pointer-events : auto;はそれを打ち消すための既定値のプロパティです。
つまり親要素はホバーアクションを停止させて、子要素はホバーアクションを動かすように制御することで、子要素にホバーしたら親要素の色が変更できるようになります。
GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。