EN
CSS - hover effect for two elements at the same time
0 points
In this article, we would like to show you how to apply hover effect for two or more elements at the same time using CSS.
In the example below, we apply hover effect to two child elements by wrapping them into the parent element and assigning their styles on .parent class hover event.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.parent:hover .child1 {7
background: yellow;8
}9
10
.parent:hover .child2 {11
background: orange;12
}13
14
</style>15
</head>16
<body>17
<div class="parent">18
<div class="child1">Element 1 - Hover me to see the effect</div>19
<div class="child2">Element 2 - Hover me to see the effect</div>20
</div>21
</body>22
</html>23
