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

Last Updated : 15 Sep, 2024

Hover effects are commonly used to make websites interactive. They are especially useful for navigation menus or buttons, providing visual feedback when users move their mouse over an element. In CSS, you can change the style of one element based on the state of another, but this works best if the elements are directly related. This means they need to be inside each other (parent-child) or next to each other (siblings).

We will learn how to make one element change the appearance of another element when you hover over it with your mouse.

How It Works

To achieve this, you can use CSS selectors to specify that when you hover over a parent element, it should change the style of a child element. This can be done with simple CSS rules.

Here are two examples to show how this works:

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>

Output:

You can use CSS to change the style of one element based on the hover state of another element. This technique is useful for creating interactive and dynamic web pages. By structuring your HTML elements correctly and applying the appropriate CSS rules, you can create engaging hover effects that enhance the user experience.

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

krishna_97

Improve

Article Tags :

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

How It Works

Similar Reads

Thank You!

What kind of Experience do you want to share?