CSS Hover效果无法作用于关联的.menubox元素求助

问题根源 #

你的.hoverbox:hover .menubox是后代选择器，仅会匹配.hoverbox内部的.menubox元素，但当前DOM结构中，.menubox是.grid的同级元素，完全不在.hoverbox的嵌套范围内，因此选择器无法命中目标，和Grid布局没有关系。

解决方案 #

方案1：使用CSS :has()选择器（现代浏览器支持） #

利用:has()检测.grid内的.hoverbox是否处于hover状态，进而控制前面的.menubox：

.menubox:has(+ .grid .hoverbox:hover) {
  transform: translateX(-40vh);
  background-color: #ff0000;
}

注：:has()目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容旧浏览器，建议用方案2或3。

方案2：调整DOM结构+兄弟选择器 #

将.menubox移到.grid之后，用通用兄弟选择器关联样式：
修改后的HTML：

<div class="grid">
  <div class="hoverbox"></div>
  <div class="flowbox"></div>
  <div class="hoverbox"></div>
</div>
<div class="menubox"></div>

对应的CSS：

.grid:has(.hoverbox:hover) ~ .menubox {
  transform: translateX(-40vh);
  background-color: #ff0000;
}

方案3：JavaScript兼容方案（适配旧浏览器） #

如果需要兼容不支持:has()的环境，用JS监听hover事件来切换类：

const hoverBoxes = document.querySelectorAll('.hoverbox');
const menuBox = document.querySelector('.menubox');

hoverBoxes.forEach(box => {
  box.addEventListener('mouseenter', () => {
    menuBox.classList.add('hover-active');
  });
  box.addEventListener('mouseleave', () => {
    menuBox.classList.remove('hover-active');
  });
});

然后在CSS中添加：

.menubox.hover-active {
  transform: translateX(-40vh);
  background-color: #ff0000;
}

补充说明 #

你之前使用该方法有效，大概率是当时的DOM结构中.menubox是.hoverbox的后代元素，后代选择器能正常命中；现在DOM结构调整后，选择器没有同步修改，导致样式失效。

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