anchor tag not clickable text overlapping issue

Issue

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 :)

Solution

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

Answered By - Preeti Aggarwal