html - How do I handle independent parent and child opacities when the child element is a link? -

i have parent <div> , child <a>. parent has background image set 60% opacity, i'd child link have 100% opacity. reason implementing way can fade parent's opacity 100% on hover, thereby eliminating need hover image.

i understand children inherit parent's opacity. tried :after {} technique described here, appropriate z-index values set, child link still sits beneath parent element , not clickable.

my issue child link cannot clicked because parent's :after pseudo-element sits above child.

my code follows:

<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 {   display: block;   z-index: 100; } 

does know of solution issue, or must create image sprite , switch swap background images on hover?

the problem aren't applying position <a> (z-index applies positioned elements) containing div , pseudo-element, pseudo-element sitting on top of link preventing being clicked.

all need give link stacking context, e.g. include relative positioning:

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

example