javascript - anchor 标签不可点击文本重叠问题

Question

在下面的 fiddle 中，我在这个结构中有带有 href 和背景图像的 anchor 标记，文本停止了 href 以点击任何想法如何解决问题，具有相同的 HTML 结构？

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

请检查框内的红色边框是否不可点击https://jsfiddle.net/uqbhcdn6/1/ .

任何想法将不胜感激:)

Answer 1

将 pointer-events:none; 属性添加到 .banner-div 类。