CSS如何实现hover父容器内按钮时修改后续同级div的背景色

原因说明 #

你原来的写法不生效是因为CSS选择器只能向下/向后匹配，无法从子元素button直接向上选中父元素.delSeperator，再匹配父元素的兄弟节点.linkField。你写的.delSeperator button:hover+.linkField匹配的是紧跟在button后面的同级.linkField，和你实际的DOM结构不符。

方案1：CSS :has() 选择器（推荐，无兼容要求优先用） #

现在主流浏览器都支持:has()选择器，可以直接匹配包含指定子元素的父元素，写法如下：

/* 当.delSeperator内部有button被hover时，选中它后面紧跟的.linkField */
.delSeperator:has(button:hover) + .linkField {
  background-color: rgba(255, 0, 0, 0.2);
}

兼容范围：Chrome 105+、Firefox 121+、Safari 15.4+，覆盖目前95%以上的全球用户。

方案2：JavaScript 实现（全兼容） #

如果需要兼容老版本浏览器，可以用JS监听鼠标事件实现：

document.querySelectorAll('.delSeperator button').forEach(btn => {
  // 鼠标移入按钮时添加背景色
  btn.addEventListener('mouseenter', () => {
    const parent = btn.closest('.delSeperator')
    const target = parent.nextElementSibling
    if (target?.classList.contains('linkField')) {
      target.style.backgroundColor = 'rgba(255, 0, 0, 0.2)'
    }
  })
  // 鼠标移出按钮时清除背景色
  btn.addEventListener('mouseleave', () => {
    const parent = btn.closest('.delSeperator')
    const target = parent.nextElementSibling
    if (target?.classList.contains('linkField')) {
      target.style.backgroundColor = ''
    }
  })
})

这个方案没有浏览器版本限制，所有支持JS的环境都可以正常运行。

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