How to affect other elements when one element is hovered in CSS ?

Last Updated : 20 Jun, 2022

In this article, we will see how to affect other elements when one element has hovered using CSS. if we define 2 HTML elements where we want to hover over one element & at the same moment want to change the style of another element then both the elements should be directly related as either parent-child or sibling, which indicates either one element must be inside another element or both elements should be within the same target element so that the hover effect can be seen. Hover is used to add styling to the elements when the mouse hovers over them, i.e. when you place your cursor over the element then some text will appear which tells you about the functionality of that element. It is generally used for navigation when the UI of any website or software is complex.

Approach: This task can be accomplished by adding one element inside the other element & accordingly declaring the required CSS properties for the parent-child elements, so that whenever hovering outside the element then automatically the property of the inner element will change.

Example 1: In the below example, we will see how other element gets affected when we hover over one element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
          
        .parent { 
            width: 600px; 
            height: 200px; 
            background-color: lightgrey; 
        } 
          
        .child { 
            margin-left: 45px; 
            width: 100px; 
            height: 30px; 
            background-color: grey; 
        } 
          
        div { 
            outline: 1px solid green; 
        } 
          
        .parent:hover .child { 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
        Hovering one element to change  
        the effect to other element 
    </h3> 
    <div class="parent"> GeeksforGeeks 
        <div class="child"> 
            GeeksforGeeks  
        </div> 
        <br> 
        <div class="child"> 
            GeeksforGeeks  
        </div> 
        <br> 
        <div class="child"> 
            GeeksforGeeks  
        </div> 
    </div> 
</body> 
</html>

Explanation: In the above example, we have made two div elements named parent and child. If we hover over the parent element then automatically it will affect the child element.

Output:

Example 2: In the below example, we will create two div elements. When you hover on one element then other elements will change their property.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
          
        .parent { 
            width: 600px; 
            height: 200px; 
            background-color: lightgrey; 
        } 
          
        .child { 
            width: 30px; 
            height: 30px; 
            background-color: grey; 
        } 
          
        div { 
            outline: 1px solid black; 
        } 
          
        .parent:hover .child { 
            background-color: green; 
        } 
          
        .child { 
            background-color: #4CAF50; 
            border: none; 
            color: white; 
            padding: 50px 160px; 
            margin-top: 50px; 
            text-align: center; 
            text-decoration: none; 
            display: inline-block; 
            font-size: 16px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
        Element's property will change when  
        hovering to other element 
    </h3> 
    <div class="parent"> 
        <button class="child"> 
            GeeksforGeeks  
        </button> 
    </div> 
</body> 
</html>