How to Style Parent Element when Hover Over a Child Element in CSS ?

Last Updated : 11 Oct, 2024

To Style Parent Element When Hovering Over A Child Element is a technique of changing how a parent looks when you hover over a child element can make your designs more engaging and interesting and enhance user interaction on your website or app.

Syntax:

child-element {
    pointer-events: auto
}
child-element:hover {
    /* Styles for child element */
}
parent-element {
    pointer-events: none
}
parent-element:hover {
    /* Styles for parent element */
}

Approach

Disable Pointer Events on Parent: The parent element has pointer-events: none; to prevent interaction, making it unresponsive to mouse events.
Change Parent Background on Hover: When the parent is hovered, its background color changes, enhancing visual feedback.
Enable Pointer Events on Child: The child elements are given pointer-events: auto; so they can still be interacted with despite the parent’s settings.
Change Child Color on Hover: When hovering over the child elements (like buttons or list items), their background or text color changes, providing immediate feedback.
Structured Markup: Both examples utilize a simple structure with headings, buttons, and lists to demonstrate how hover effects can enhance user interaction with parent-child relationships in HTML.

Example 1: In this example, we changes the parent div background color when the child button is hovered. It uses the button:hover selector to trigger the effect.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Apply styles to parent element */
        .parent {
            pointer-events: none;
        }

        .parent:hover {
            background-color: rgb(132, 233, 189);
        }

        /* Apply styles to child element */
        .parent .child {
            pointer-events: auto;
        }

        .parent .child:hover {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h1 style="color:green">GeeksforGeeks</h1>
        <button class="child">Hover over me</button>
    </div>
</body>

Output:

How to style the parent element when hovering over a child element?

Styling the parent element when hovering over a child element

Example 2: In this example, when hovering over any of the list items within the <ul> element, the text color of the list item will change to red and the color of the parent element change to light blue.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Apply styles to parent element */
        .parent {
            pointer-events: none;
        }

        .parent:hover {
            background-color: lightblue;
        }

        /* Apply styles to child element */
        .parent ul li {
            pointer-events: auto;
        }

        .parent ul li:hover {
            color: red;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <div class="parent">
        <h2>Parent Element</h2>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

</html>

Output:

How to style the parent element when hovering a child element?

Styling the parent element when hovering over a child element

How hovering over a division element to gradually change the width in CSS ?

bardock2393

Improve

Article Tags :

How to Style Parent Element when Hover Over a Child Element in CSS ?

Syntax:

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?