anchor tag not clickable text overlapping issue

Question

in the below fiddle i have anchor tag with href and background image in this structure, the text is stopping the href to clickable any idea how to solve the issue, with the same HTML structure?

<div class="banner-container">
<div class="banner-box">
    <div class="banner-div">
        <div class="bannerheading">
            <p><span>The correct link should be&nbsp;</span></p>
        </div>
    </div>
    <a href="https://www.google.com/">
        <div class="banner-img" style="background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');">
        </div>
    </a>
</div>

please check the red border inside the box is not clickable https://jsfiddle.net/uqbhcdn6/1/ .

any idea will be appreciated:)

Answer 1

Add pointer-events:none; property to the .banner-div class.

Answer 2

One possibility would be to give the .bannerheading the style pointer-events: none; , though this will make it impossible to select the text in .bannerheading :

 .banner-container { min-height: 300px; position: relative; margin-bottom: 20px; } .banner-container .banner-box { border-radius: 12px; min-height: 350px; background-color: #1C2841; overflow: hidden; } .banner-container .banner-box .banner-div { top: 50%; height: auto; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); padding: 20px; z-index: 3; border-radius: 12px; border:1px solid red; } .banner-div { position: absolute; width: 100%; height: 100%; z-index: 999; top: 34%; padding: 10px; pointer-events: none; } .banner-container .banner-box .banner-div .bannerheading { color: #fff; } banner-container .banner-box .banner-img { min-height: 350px; border-radius: 12px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .banner-img { height: 100%; width: 100%; min-height: 300px; background-size: cover; background-position: center; } 

 <div class="banner-container"> <div class="banner-box"> <div class="banner-div"> <div class="bannerheading"> <p><span>The correct link should be&nbsp;</span></p> </div> </div> <a href="https://www.google.com/"> <div class="banner-img" style="background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');"> </div> </a> </div> </div> 

Answer 3

You can solve this in two ways

1.You can add z-index and position:relative for z-index to get applied.

2.You can add pointer-events:none