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

Question

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

阅读stackoverflow和其他来源，这应该是可行的，但我已经在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背景的需求，因为div背景实际上并不需要成为"合适"的元素，因为它只是装饰。

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>