EN
CSS - hover one div to change another div element (multiple divs)
0 points
In this article, we would like to show you how to change multiple div elements after you hover another div using CSS.
Quick solution:
xxxxxxxxxx1
.div1:hover ~ .div2 {2
background: yellow;3
}Note:
With this solution, the style will be applied to all
divelements withclass="div2".
Preview:
In this section, we present how to change the background of the div elements (div2) that are separated by other elements using ~ operator.
Runnable example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
width: 100px;8
border: 2px solid black;9
border-radius: 5px;10
margin-right: 10px;11
text-align: center;12
line-height: 100px;13
}14
15
/* required */16
.div1:hover ~ .div2 {17
background: yellow;18
}19
20
</style>21
</head>22
<body style="display: flex;">23
<div class="div1">Hover me!</div>24
<div>other element</div>25
<div class="div2">div2</div>26
<div class="div2">div2</div>27
</body>28
</html>