つぶやき
-ブログ-

hoverで子要素、孫要素、兄弟要素の値を変更する方法

2023年3月3日

ボタンのホバー時に色を反転させるために「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（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

前の記事へ

次の記事へ

一覧へ戻る

つぶやき-ブログ-