我有一个父<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;
}
伪元素位于孩子的上方。
我的代码如下：
{{1}}
有没有人知道这个问题的解决方案，还是我必须在悬停时创建图片精灵并切换交换背景图片？
答案 0 :(得分：1)
问题是你没有将位置应用于<a>本身（z-index仅适用于positioned elements)只包含div和伪元素，所以伪元素是坐在链接顶部，防止它被点击。
您需要做的就是为链接提供堆叠上下文，例如包括相对定位：
div a {
display: block;
position: relative;
z-index: 100;
}