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（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。