html - CSS 悬停、z-index 和 div

Question

我正在为一个大学元素工作，当用户将鼠标悬停在 div 上时，我无法将 div 的不透明度从 0 更改为 .9。我想知道 z-index 是否会影响悬停的工作方式。我已经尝试了 J Query 中的代码并使用 CSS transition 属性，但仍然收到相同的结果。什么都没发生。这是我在 CSS 和 HTML 中使用的代码。

 <div class="special">
        <div class="spImage">
              <div>
                 <article>Lil Wayne</article>
              </div>
              <img id="special1" src="image/2pc.jpg" />
              <p>2pc<br>Dark<br>$1.30</p>

        </div>
   </div>


.spImage{
    border: 2px solid grey;
    background-color: black;
    position: relative;
    z-index: -1;

}

 .spImage div{
            background-color: orange;
            position: absolute;
            opacity: 0;
            width: 250px;
            height: 330px;
            z-index: 0;
            box-shadow: 0px 0px 5px 10px orange;
            border-radius: 5px;
            -o-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;


        }


 .spImage div:hover{
            opacity: .8;
        }

我的总体目标是使 div 出现在具有 spImage 类的 div 之上。非常感谢任何帮助，谢谢。

Answer 1

z-index确定一个元素 stacking order ，在您的示例中，您根本不需要使用 z-index，因为您的 HTML 元素已经已针对您要执行的操作正确定位。

请参阅下面没有 z-index 属性的示例 - 如果我正确理解您的问题，这应该是预期的行为:

.spImage{
  border: 2px solid grey;
  background-color: black;
  position: relative;

}

.spImage div{
  background-color: orange;
  position: absolute;
  opacity: 0;
  width: 250px;
  height: 330px;
  box-shadow: 0px 0px 5px 10px orange;
  border-radius: 5px;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.spImage div:hover{
  opacity: .8;
}

<div class="special">
  <div class="spImage">
    <div>
      <article>Lil Wayne</article>
    </div>
    <img id="special1" src="https://i.imgur.com/Ik7I6l7b.jpg" />
    <p>2pc<br>Dark<br>$1.30</p>
  </div>
</div>