I have several sibling divs lined up like THIS:
div {
text-align: center;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
div:hover {
background-color: #b5b5b5;
}
/*color changes*/
.a:hover ~ .b {
background-color: #E6E600;
}
.b:hover + .a {
background-color: #ccffcc;
}
<div class="a">Box A
</div>
<div>another box
</div>
<div>another box
</div>
<div>another box
</div>
<div class="b">Box B
</div>
Is there a way to make it so that when I hover over box b, box a's attributes change?
EDIT: I want to change "a"'s background color