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

I want to change the background image of the container such that when I hover on a link in the div, the background image changes.

Reading in stackoverflow and other sources, this should work, but I have tested in both Chrome and Edge. Neither is working at the moment.

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

CodePudding user response：

If you are able to change your HTML, swap the background and text elements.

Then hovering on the text element can pick up its sibling element which is the background as it comes after it in the flow:

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

But an alternative way could be to put your background images onto a pseudo element and cut out the need for a div background which isn't really needed to be a 'proper' element as it is just decoration.

CodePudding user response：

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

CodePudding user response：

Thank you all.

Here is what I finally did:

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