使用HTML/CSS实现悬停div内链接时修改容器背景图失效求助

问题根源 #

CSS 中的后续兄弟选择器 ~ 只能匹配同一父元素下、位于当前元素之后的同级兄弟节点，你的 HTML 结构里 #background 放在 #text 前面，所以 #text:hover ~ #background 这条规则永远无法命中元素，自然没有效果。

方案1：调整HTML结构（全浏览器兼容） #

不需要修改原有CSS，只需要把 #background 节点挪到 #text 节点之后即可：

<div id="container">
  <div id="text"><a href="http://www.google.ca">Google</a></div>
  <div id="background"></div>
</div>

原有CSS保持不变即可正常生效：

#container {
  width: 50%;
  height: 300px;
  position: relative;
}

#text {
  position: absolute;
  font-size: 3em;
  z-index: 5;
}

#text:hover~#background {
  background-image: url("http://lorempixel.com/400/200/food/");
}

#background {
  width: 100%;
  background-image: url("http://lorempixel.com/400/200/animal/");
  background-position: center;
  background-size: cover;
  height: 100%;
  opacity: 0.5;
  position: absolute;
}

方案2：使用:has()伪类（无需调整HTML，兼容2022年后发布的所有主流浏览器版本） #

如果不想改动HTML结构，只需要修改对应CSS选择器，通过父容器匹配子元素的hover状态即可：

/* 把原来的#text:hover~#background替换成这条规则即可 */
#container:has(#text:hover) #background {
  background-image: url("http://lorempixel.com/400/200/food/");
}

其余CSS和原有HTML保持不变即可正常生效。

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