I'm curious as to why the size of the second div does not change when hovering over the third div, unlike when hovering over the first div.
#block {
width: 50%;
white-space: nowrap;
}
.div {
display: inline-block;
text-align: center;
}
div:nth-child(1) {
width: 10%;
background: red;
}
div:nth-child(2) {
width: 80%;
background: blue;
}
div:nth-child(3) {
width: 10%;
background: green;
}
div:nth-child(1):hover {
width: 80%;
}
div:nth-child(1):hover + div:nth-child(2) {
width: 10%;
}
div:nth-child(3):hover {
width: 80%;
}
div:nth-child(3):hover + div:nth-child(2) {
width: 10%;
}<div id="block">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</div>