CSS hover元素互控咨询：双列滑动布局反向修改失效问题

问题情况 #

要实现双列页面区域的hover交互：

• 鼠标悬停左列时，两列均向中间滑动，突出左列
• 鼠标悬停右列时，两列均向右滑动，突出右列

目前左列交互正常，但悬停右列时仅右列自身滑动，左列无响应。排查发现：父容器下第一个子元素能修改第二个，第二个无法修改第一个。

核心原因：CSS兄弟选择器的局限性 #

CSS中的兄弟选择器（+相邻兄弟、~通用兄弟）只能选中当前元素之后的同级元素，无法选中前置的同级元素：

• .residential:hover ~ .commercial 能生效，因为commercial在residential之后
• .commercial:hover ~ .residential 无效，因为residential在commercial之前，不在其后续兄弟列表中

两种解决方案 #

方案一：纯CSS（现代浏览器适用） #

利用:has()选择器监听父容器内子元素的hover状态，间接控制前置兄弟元素。修改后的关键CSS代码：

/* 初始状态 */
.residential, .commercial {
  position: relative;
  transform: translateX(0);
  transition: ease 1s;
}

/* 左列hover时，两列右移 */
.residential:hover {
  transform: translateX(50px);
}
.residential:hover + .commercial {
  transform: translateX(50px);
}

/* 右列hover时，两列左移 */
.grid-cols-2:has(.commercial:hover) .residential {
  transform: translateX(-50px);
}
.grid-cols-2:has(.commercial:hover) .commercial {
  transform: translateX(-50px);
}

:has()选择器支持Chrome 105+、Firefox 121+，无需额外JS即可实现需求。

方案二：JavaScript（兼容所有浏览器） #

如果需要兼容不支持:has()的旧浏览器，直接通过JS监听hover事件控制样式：

const residential = document.querySelector('.residential');
const commercial = document.querySelector('.commercial');

// 左列悬停事件
residential.addEventListener('mouseenter', () => {
  residential.style.transform = 'translateX(50px)';
  commercial.style.transform = 'translateX(50px)';
});
residential.addEventListener('mouseleave', () => {
  residential.style.transform = 'translateX(0)';
  commercial.style.transform = 'translateX(0)';
});

// 右列悬停事件
commercial.addEventListener('mouseenter', () => {
  residential.style.transform = 'translateX(-50px)';
  commercial.style.transform = 'translateX(-50px)';
});
commercial.addEventListener('mouseleave', () => {
  residential.style.transform = 'translateX(0)';
  commercial.style.transform = 'translateX(0)';
});

父-双子元素的CSS选择器规则总结 #

1. 相邻兄弟选择器+：仅能选中紧跟当前元素的下一个同级兄弟
2. 通用兄弟选择器~：能选中当前元素之后的所有同级兄弟
3. CSS无原生“前置兄弟选择器”，无法直接选中当前元素之前的同级元素
4. 现代浏览器可通过:has()间接实现跨前置兄弟的样式控制，旧浏览器需用JS处理

内容的提问来源于stack exchange，提问作者Anton E