当子元素是链接时，如何处理独立的父不透明和子不透明

Question

我有一个父母<div>和一个孩子<a>。父链接的背景图像设置为60%不透明度，但我希望子链接具有100%不透明度。我这样做的原因是，这样我就可以在悬停时将父元素的不透明度降低到100%，从而消除了悬停图像的需要。

我知道孩子继承了他们父母的不透明度。我尝试了这里描述的:after {}技术，但即使设置了适当的z-index值，子链接仍然位于父元素下方，并且不可点击。

我的问题是子链接不能被点击，因为父的:after伪元素位于子链接之上。

我的代码如下:

<div>
  <a href="#">Load more</a>
</div>
div {
  position: relative;
  height: 300px;
} 
div:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background: url('../img/bg-load-more.png') repeat-x;
  width: 100%;
  height: 300px;
  z-index: 10;
  opacity: 0.4;
}
div a {
  display: block;
  z-index: 100;
}

有没有人知道这个问题的解决方案，或者我必须创建一个图像精灵和切换切换背景图像悬停?

Answer 1

问题是您没有对<a>本身应用位置(z-index仅适用于positioned elements)，仅包含div和伪元素，因此伪元素位于链接的顶部，阻止它被单击)。

你所需要做的就是给链接一个堆叠上下文，例如包括相对定位:

div a {
display: block;
position: relative;
z-index: 100;
}