html - 子要素がリンクの場合、独立した親と子の不透明度を処理するにはどうすればよいですか?

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

この問題の解決策を知っている人はいますか、または画像スプライトを作成し、ホバー時にスワップ背景画像を切り替える必要がありますか?