I have two divs and I would like to change the color of the first one when hovering over the second one. I've seen solutions where the hovered element comes before the target element in CSS, but what if the hovered element comes after? Is there a way to achieve this without using JavaScript?
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
}
.box-2:hover + .box {
background-color: green;
}<body>
<div class="wrapper">
<div class="box"></div>
<div class="box-2"></div>
</div>
</body>