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

Question

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

阅读 Whosebug and other 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>

Answer 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 背景的需求，因为它实际上并不需要成为 'proper' 元素只是装饰

Answer 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>

Answer 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>

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

Hover over one div, change background over link in div using HTML/CSS

html

css

hover

containers

background-image