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

Last Updated : 07 Jun, 2023

In this article, we will learn how to style the parent element when hovering over a child element. Styling the parent element when hovering over a child element is a useful CSS technique that allows you to change the appearance of the parent element when the mouse cursor is hovering over one of its child elements. This can be useful for adding interactivity and visual feedback to your website or web application.

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: In this approach, we are using the hover selector to apply styles to both the child and parent elements of the HTML structure. The CSS code applies the background color of yellow to the button element when it is being hovered over by using the child selector, and then applies the background color to the div element when the button is being hovered over by using the adjacent sibling selector.

Example 1: In this example, we have a simple HTML structure with a parent element div and a child element button. Here is an example CSS code that will change the background color of the parent div when the button is being hovered over.

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>