Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to affect other elements when one element is hovered in HTML?
To affect other elements when one element is hovered in HTML, you need to establish a relationship between the elements using CSS pseudo-classes and CSS selectors. The hover effect can target child elements, descendant elements, or adjacent sibling elements using the appropriate CSS combinators.
The most common approach uses the :hover pseudo-class combined with descendant selectors to change styles of child elements when the parent is hovered. This technique works because CSS allows you to target elements based on their relationship to the hovered element.
Syntax
Following is the basic syntax for affecting child elements on hover
.parent:hover .child {
/* CSS properties to change */
}
For sibling elements, you can use the adjacent sibling selector
.element:hover + .sibling {
/* CSS properties to change */
}
Using Parent-Child Hover Effects
The most common scenario involves changing child element properties when the parent element is hovered. This uses the descendant selector to target child elements.
Example Changing Child Element Colors
In this example, we will change the color of two boxes inside a div on mouse hover
<!DOCTYPE html>
<html>
<head>
<title>Parent-Child Hover Effect</title>
<style>
.parent {
width: 500px;
height: 150px;
background-color: orange;
padding: 20px;
border: 3px solid red;
text-align: center;
font-family: Arial, sans-serif;
}
.child {
width: 100px;
height: 40px;
background-color: blue;
color: white;
margin: 10px auto;
line-height: 40px;
border: 2px solid darkblue;
}
.parent:hover .child {
background-color: green;
border-color: darkgreen;
transform: scale(1.1);
transition: all 0.3s ease;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Hover Effect Demo</h2>
<p>Keep the mouse cursor inside the orange colored div to change the color of the blue boxes.</p>
<div class="parent">
Hover over this container
<div class="child">Box 1</div>
<div class="child">Box 2</div>
</div>
</body>
</html>
When you hover over the orange container, both blue boxes change to green and slightly scale up
Before hover: Orange container with two blue boxes After hover: Orange container with two green boxes (slightly larger)
Using Button Hover Effects
You can also apply hover effects to buttons and other interactive elements within a container.
Example Button Color Change on Container Hover
In this example, we will change the color of a button element when its container div is hovered
<!DOCTYPE html>
<html>
<head>
<title>Container-Button Hover Effect</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.parent {
width: 600px;
height: 200px;
background-color: #4a90e2;
margin: 20px auto;
outline: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.child {
background-color: orange;
border: none;
padding: 20px 40px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.parent:hover .child {
background-color: yellow;
color: #333;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<h2>Container Hover Effect</h2>
<p>Keep the mouse cursor inside the blue container to change the button color to yellow.</p>
<div class="parent">
<button class="child">Click Me</button>
</div>
</body>
</html>
When hovering over the blue container, the orange button changes to yellow and lifts up with a shadow effect
Before hover: Blue container with orange button After hover: Blue container with yellow button (elevated with shadow)
Using Sibling Hover Effects
You can also affect sibling elements using the adjacent sibling selector (+) or general sibling selector (~).
Example Adjacent Sibling Hover
<!DOCTYPE html>
<html>
<head>
<title>Sibling Hover Effect</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.box {
width: 150px;
height: 100px;
margin: 20px;
display: inline-block;
border-radius: 10px;
line-height: 100px;
color: white;
font-weight: bold;
transition: all 0.3s ease;
}
.trigger {
background-color: #e74c3c;
}
.target {
background-color: #3498db;
}
.trigger:hover + .target {
background-color: #2ecc71;
transform: rotate(10deg) scale(1.1);
}
</style>
</head>
<body>
<h2>Sibling Hover Effect</h2>
<p>Hover over the red box to affect the blue box next to it.</p>
<div class="box trigger">Hover Me</div>
<div class="box target">I Change</div>
</body>
</html>
When hovering over the red box, the adjacent blue box changes to green and rotates
Before hover: Red "Hover Me" box, Blue "I Change" box After hover: Red "Hover Me" box, Green rotated "I Change" box
Common CSS Selectors for Hover Effects
Following table shows different CSS selectors you can use with the :hover pseudo-class
| Selector | Description | Example |
|---|---|---|
.parent:hover .child |
Affects all descendant elements with class "child" | Container hover changes all nested buttons |
.parent:hover > .child |
Affects only direct child elements | Card hover affects immediate children only |
.trigger:hover + .target |
Affects the immediately following sibling | Tab hover highlights next tab content |
.trigger:hover ~ .target |
Affects all following siblings | Menu item hover affects all subsequent items |
Conclusion
CSS hover effects allow you to create interactive experiences by affecting child elements, descendant elements, or siblings when an element is hovered. The key is using appropriate CSS combinators with the :hover pseudo-class to establish the relationship between the trigger and target elements. These techniques work entirely with CSS, requiring no JavaScript for basic interactive effects.
21K+ Views
