正确定位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 - 代码是leftPost的子代，这意味着它将继承不透明度。更改Z-index不会改变这一点。

您的问题的解决方案是移动a - 元素，使其不是leftPost的直接孩子

或

将不透明度放在不属于链接父元素的元素上。

示例：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;