將滑鼠懸停在一個div上，使用HTML/CSS更改div中鏈接的背景

我想更改容器的背景影像，以便當我將滑鼠懸停在 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>

uj5u.com熱心網友回復：

如果您能夠更改 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 背景的需求，這并不是真正需要成為“適當”元素，因為它只是裝飾。

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

謝謝你們。

這是我最終做的：

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

標籤：html css 徘徊 集装箱 背景图片

上一篇：在magento2中將產品添加到購物車后如何發送電子郵件？

下一篇：更新不同頁面上的表格列