懸停效果不適用于z-index較低的元素-有解無憂

我的 z-index 有問題。我已經在這個 jsfiddle 中模擬了我的問題。我在一個容器中有兩個兄弟姐妹 div。其中之一用作容器的背景并對其元素產生懸停效果，因此當您懸停在其元素上時，元素的顏色會發生變化。將它放在第二個 div 后面我使用了負 z-index ，但懸停效果對它不起作用。這個問題的任何解決方案？我看到了一些關于這個主題的問題，但沒有任何有效的答案......

提前致謝。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        text-decoration: none;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
      }

      .container {
        width: 1000px;
        height: 600px;
        position: relative;
      }

      .div1 {
        position: absolute;
        z-index: -10;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: lightgreen;
      }

      .div2 {
        width: 200px;
        height: 200px;
        background-color: rgb(245, 189, 116);
        margin: 0 auto;
      }

      .div1 p:hover {
        color: red;
      }

      .div2 p:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="div1"><p>div 1 doesn't work</p></div>
      <div class="div2"><p>div 2 works</p></div>
  </div>
  </body>
</html>

uj5u.com熱心網友回復：

查看我對您的 CSS 所做的編輯。如果您將div1背景設定為檸檬綠作為z-index: 0;元素的默認圖層并使用它，它會更好地作業z-index: 1;，div2因此它位于默認圖層上方的第一層。見下文。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  }
  
.container {
  width: 1000px;
  height: 600px;
  position: relative;
}

.div1 {
  position: absolute;
  z-index: 0;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: lightgreen;
}


.div2 {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgb(245, 189, 116);
  margin: 0 auto;
  z-index: 1;
}


.div1 > p:hover{
  color: red;
}


.div2 > p:hover{
  color: red;
}

<div class="container">
    <div class="div1"><p>div 1 works now</p></div>
    <div class="div2"><p>div 2 works</p></div>
</div>

uj5u.com熱心網友回復：

從您的代碼中，您將滑鼠懸停在容器 div 上，而不是 div1 上。

Z-index 看到的是建筑物的高度，而您則是從鳥瞰中觀察它。

要解決此問題，您應該將 div1/div2 設定為正 z-index，并更改 div2 相對于父 div 的位置。

獲取有關 div 定位的更多資訊：

https://tomelliott.com/html-css/css-position-child-div-parent

編輯：這是一個模擬所需懸停效果的快速示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        text-decoration: none;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
      }

      .grandparent {
        width: 250px;
        height: 250px;
        background-color: lightgreen;
        position: relative;
      }

      .parent {
        width: 150px;
        height: 150px;
        /*position:absolute;*/
        bottom: 0px;
      }
      .child {
        width: 70px;
        height: 70px;
        background-color: rgb(245, 189, 116);
        position: absolute;
        right: 0px;
        top: 0px;
      }
      .parent p:hover {
        color: red;
      }

      .child p:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="grandparent">
      <div class="parent">
        <p>div 1 does work now</p>
        <div class="child"><p>div 2 works</p></div>
      </div>
    </div>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386929.html

標籤：html css 背景 z-索引堆叠上下文

上一篇：如何在附加子項上使用本地存盤

下一篇：如何使我的CSS頁面上的影像具有回應性？