更改 hover css 上的相邻元素

Question

Please tell me why when you hover over the third div , the size of the second div does not change, as when you hover 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>

Answer 1

Quoting from Mozilla Developers Website For More info Check the link at the bottom

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

This means it will try to find a sibling of the same parent that is after the current selecting element not the sibling before the current One.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator