将鼠标悬停在一个 div 上，使用 HTML/CSS 更改 div 中链接的背景答案

【问题标题】：Hover over one div, change background over link in div using HTML/CSS将鼠标悬停在一个 div 上，使用 HTML/CSS 更改 div 中链接的背景
【发布时间】：2021-12-04 00:16:23
【问题描述】：

我想更改容器的背景图像，以便当我将鼠标悬停在 div 中的链接上时，背景图像会发生变化。

阅读stackoverflow 和其他sources，这应该可以，但我已经在 Chrome 和 Edge 中进行了测试。目前两者都没有工作。

#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;
}

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

【问题讨论】：

Css 不能让你以你想要的方式“备份” - 你能改变你的 HTML 吗？

标签： html css hover containers background-image

【解决方案1】：

如果您能够更改 HTML，请交换背景和文本元素。

然后将鼠标悬停在文本元素上可以拾取它的兄弟元素，这是流中它之后的背景：

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

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

#text:hover~#background {
  background-image: url("https://picsum.photos/id/1015/300/300");
}

#background {
  width: 100%;
  background-image: url("https://picsum.photos/id/1016/300/300");
  background-position: center;
  background-size: cover;
  height: 100%;
  opacity: 0.5;
  position: absolute;
}

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

但另一种方法是将您的背景图像放在伪元素上，并消除对 div 背景的需求，因为它只是装饰，因此并不真正需要成为“正确”元素。

【讨论】：

谢谢。目标是具有低不透明度背景，顶部有无透明度文本（和工作链接）。当我将文本/链接与背景放在同一个 div 中时，我遇到了文本不透明度的问题（背景的不透明度相同）。我尝试过的其他事情导致链接不可点击。
嗨，我是不是误解了目标？
我想你明白了。我会重试，让你知道它是如何工作的！这是一个班级项目。
@Kurt_eh 请注意，不透明度是最后渲染的，覆盖整个元素，不能被另一个元素取消或否定。完全不使用不透明度，而是通过使用rgba 值来使用半透明背景会更容易。在rgba 中，您有第四个不透明度值，该值仅适用于背景颜色本身，但不适用于文本。
嗨@tacoshy，我不明白你评论的相关性——你能解释一下吗？谢谢。

【解决方案2】：

#background {
  
  background-image: url("http://lorempixel.com/400/200/sports/");
  height:200px;
 
 
}

#container:hover > div:not(:hover){
   background-image: url("http://lorempixel.com/400/200/food/");
}

#text{height:0;}

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

【讨论】：

【解决方案3】：

谢谢大家。

这是我最终所做的：

#containerGen {
  width: 100%;
  height: 200px;
  position: relative;
}

#one {
  position: absolute;
  z-index: 5;
}

#alive {
  position: absolute;
  z-index: 5;
  top: 9em;
}

#alight {
  position: absolute;
  z-index: 5;
  top: 9em;
  left: 3em;
}

#and {
  position: absolute;
  z-index: 5;
  top: 9em;
  left: 6.25em;
}

#alone {
  position: absolute;
  z-index: 5;
  top: 9em;
  left: 8em;
}

#follow {
  position: absolute;
  z-index: 4;
  top: 9em;
}

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

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

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

#background {
  width: 100%;
  background-image: url("http://lorempixel.com/400/200/sports/1/");
  background-position: center;
  background-size: cover;
  height: 500px;
  opacity: 0.5;
  position: absolute;
  z-index: 0;
}

<div id="containerGen">
  <div id="one">
    <p>
      M. "Em" Savage has awoken to find herself in what can only be called a stone sarcophagus. Woken up with no memory of who she is (save for the name on her "tomb") she must free the others trapped with them, discover not only who, but where they are, and
      lead their way out of whatever has them trapped in the dark.
    </p>
  </div>
  <div id="alive"><a class="bold wavyLine" href="https://scottsigler.com/book/alive/">Alive,</a> </div>
  <div id="alight"><a class="bold wavyLine" href="https://scottsigler.com/book/alight/">Alight,</a> </div>
  <div id="and">and</div>
  <div id="alone"><a class="bold wavyLine" href="https://scottsigler.com/book/alone/">Alone</a> </div>
  <div id="follow">
    <span style="margin-left:10.75em;">follow</span> the "birthday children" as they discover who they are, where they came from, and the malevolent purpose for why they are there!
    <p>The author of this page makes a guest appearance as a gunner during a battle in "Alone." It is unknown at this point if I survived.</p>
  </div>
  <div id="background"></div>
</div>

【讨论】：