正确定位z-index和不透明度

Question

我有两个绝对div的嵌套链接,如下所示:

<div class="container">
    <div class="leftPostHolder">
        <div class="leftPost">
            <h3><a href="#">link</a></h3>
        </div>
    </div>
</div>

第一个div(leftPostHolder)有黑色背景,第二个div(leftPost)有红色,当第二个div悬停时,它的不透明度设置为0.5,链接背景设置为白色.现在我希望链接位于这两​​个div的上方,以便不会对它应用变暗效果,而只对红色背景的第二个div应用.与其背景的链接不应与具有不透明度的暗化效果重叠.如何在这两个元素上面设置链接？我尝试使用z-index并定位该链接但没有成功.
完整代码在这里:http://jsfiddle.net/v21t290a/

Answer 1

这不是z-index问题.你的a-tag是一个孩子,leftPost这意味着它将继承不透明度.更改Z-index不会改变这一点.

你的问题的解决方案是移动a-element,使其不是直接的孩子leftPost

要么

将Opacity放在不是链接父级的元素上.

例:

$(".leftPost").hover(function() {
  $(".leftPost a").toggleClass("aHover");
});

.container {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}
.leftPostHolder {
  background-color: #000;
  position: absolute;
  width: 30%;
  height: 100px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}
.leftPost {
  width: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  height: 100%;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  display: table;
  z-index: 2;
}

.leftPost:hover{
    
  transform: scale(1.05);
  -ms-transform: scale(1.05);
  -mos-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform-origin: top center;
  -ms-transform-origin: center;
  -mos-transform-origin: center;
  -webkit-transform-origin: center;
}

.opacityDiv {
  width: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  height: 100%;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  display: table;
  z-index: 1;
}
.leftPost:hover + .opacityDiv {
    opacity: 0.5;
}
.leftPost h3 {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.leftPost a{
  color: transparent;
  text-align: center;
  padding:10px;
  display:block;
}
.aHover {
  color: #454545!important;
  transform: rotate(-2deg);
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <div class="leftPostHolder">
    <div class="leftPost">
      <h3><a href="#">link</a></h3>
    </div>
    <div class="opacityDiv"></div>
  </div>
</div>