鼠标悬停选中同级元素问题：前序兄弟选择器失效解决方案咨询

这个问题我之前也踩过坑！CSS里的兄弟选择器（~）确实只能选中当前元素之后的同级元素，没法往前选中前面的兄弟，但针对你的需求，有几个很实用的解决方案，咱们慢慢说：

先明确你的需求 #

• 鼠标悬停.one时，.two和.three使用相同背景图
• 鼠标悬停.two时，.one和.three使用相同背景图
• 鼠标悬停.three时，.one和.two使用相同背景图

方案1：用Flex布局反转DOM与视觉顺序（纯CSS解决） #

既然~只能选后面的兄弟，那我们可以把元素的DOM顺序和视觉显示顺序拆开。比如给父容器加Flex布局，用flex-direction: row-reverse反转显示顺序，这样DOM里的.one（第一个元素）会显示在最右边，而DOM里的.three（最后一个元素）会显示在最左边。这时hover视觉上的.one（实际是DOM里的.three），就能用~选中它前面的所有兄弟了。

示例代码：

/* 父容器设置Flex反转顺序 */
.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 200px;
  height: 200px;
  margin: 15px;
  cursor: pointer;
  transition: all .3s ease;
}

/* 悬停视觉上的.one（对应DOM的.three），给.two和.one加背景图 */
.container .three:hover ~ .two,
.container .three:hover ~ .one {
  background-image: url('你的背景图地址');
}

/* 悬停视觉上的.two（对应DOM的.two），给.one和.three加背景图 */
.container .two:hover ~ .one,
.container .two:hover ~ .three {
  background-image: url('你的背景图地址');
}

/* 悬停视觉上的.three（对应DOM的.one），给.two和.three加背景图 */
.container .one:hover ~ .two,
.container .one:hover ~ .three {
  background-image: url('你的背景图地址');
}

如果不想整体反转，也可以用order属性单独调整每个元素的显示位置，原理是一样的——让需要被选中的前序元素变成DOM里的后序元素，就能被~选中了。

方案2：JavaScript动态控制类（更灵活，不改动布局） #

如果你的布局不方便调整顺序，用JS是最直接的办法。我们可以监听鼠标的mouseover和mouseout事件，给除了当前hover元素之外的所有元素添加/移除一个共享背景图的类，逻辑清晰还不受布局限制。

示例代码：

<div class="container">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
</div>

.item {
  width: 200px;
  height: 200px;
  float: left;
  margin: 15px;
  cursor: pointer;
  transition: all .3s ease;
}

/* 定义共享背景图的类 */
.shared-bg {
  background-image: url('你的背景图地址');
}

const items = document.querySelectorAll('.item');

items.forEach(item => {
  // 鼠标进入时，给其他元素加类
  item.addEventListener('mouseover', () => {
    items.forEach(i => {
      if (i !== item) i.classList.add('shared-bg');
    });
  });
  
  // 鼠标离开时，移除所有类
  item.addEventListener('mouseout', () => {
    items.forEach(i => i.classList.remove('shared-bg'));
  });
});

这个方法不管元素的DOM顺序怎么变都能生效，适合复杂的布局场景。

方案3：CSS Grid进阶技巧（可选） #

如果你的项目用了Grid布局，也可以用类似Flex的思路：给父容器设置display: grid; grid-template-columns: repeat(3, 200px);，然后用order属性调整每个元素的显示位置，让需要被选中的前序元素变成DOM里的后序元素，再用兄弟选择器实现效果。不过这个方法和Flex思路一致，只是布局方式不同，这里就不展开细说了。

内容的提问来源于stack exchange，提问作者Daniel Theman