嗨，我完全懂你的需求！你悬停在某个.header上时，只想让它后面紧跟着的那个.footer一起高亮，而不是所有在它之后的.footer都跟着变。你之前用~选择器的问题就在于，它会选中所有在目标元素之后的同类型兄弟元素，这就是为啥所有footer都跟着变黄了，对吧？

其实解决方法超简单，根本不需要JavaScript，换个CSS选择器就行：把后续兄弟选择器~换成相邻兄弟选择器+！这个选择器的作用就是专门选中紧接在目标元素之后的第一个兄弟元素，完美契合你的需求。

给你看调整后的完整代码：

CSS 代码 #

.header:hover {
  background-color: yellow;
}
/* 只匹配当前hover的header紧挨着的下一个footer */
.header:hover + .footer {
  background-color: yellow;
}

HTML 代码（和你原来的一样就行） #

<div class="header">Header</div>
<div class="footer">Footer</div>
<div class="header">Header</div>
<div class="footer">Footer</div>
<div class="header">Header</div>
<div class="footer">Footer</div>
<div class="header">Header</div>
<div class="footer">Footer</div>

这样修改之后，你悬停任意一个header，只会触发它后面紧挨着的那个footer变色，其他组的header和footer完全不受影响，纯CSS实现，完全符合你的要求~

内容来源于stack exchange