图片悬停显示顶部文本及链接失效问题求助

我实现了图片悬停显示顶部标题文本的效果，标题和图片都设置了跳转链接，但图片链接无法生效：点击标题能正常跳转，点击图片却没有反应。

问题原因 #

.entry-header元素设置了position:absolute、z-index:15，且宽高均为100%，悬停后它会完全覆盖在图片链接（.entry-thumbnail）的上方，导致图片链接被遮挡，无法接收点击事件。

解决方案 #

给.entry-header添加pointer-events: none，让它不拦截鼠标点击事件；同时给标题里的链接设置pointer-events: auto，保证标题链接的点击功能正常。这样图片链接就能被正常点击了。

修改后的完整代码 #

HTML

<article> 
<div class="entry-wrapper">
<header class="entry-header" >
            <div class="entry-meta"><span>Text</span><h2><a  href="https://www.google.com/" >Headline</a></h2>
            </header>
        <a href="https://www.google.com/" class="entry-thumbnail">
    <img width="300" height="300" src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="" decoding="async"></a>         
    
    <div class="entry-content entry-excerpt">
                </div>

        </div>

</article>

CSS

html *, html ::after, html ::before{
box-sizing:border-box}

.entry-wrapper{
overflow:hidden;
height:100%
}

article .entry-wrapper .entry-header{
opacity:0;
position:absolute;
z-index:15;
width:100%;
height:100%;
padding:30px;
color:white !important;
pointer-events: none; /* 添加这行，让header不拦截点击 */
}
article .entry-wrapper:hover .entry-header{
opacity:1;
transition:.3s ease-in-out;
background-color:#6C836F;
}
article .entry-wrapper{
position:relative
}
article .entry-thumbnail:hover{
opacity:1
}

.entry-small .entry-header, .home .entry-thumbnail {
margin:0
}
article .entry-wrapper .entry-header a{
color:white !important;
pointer-events: auto; /* 添加这行，保证标题链接可点击 */
}
article{
width:300px;
height:300px
}
.entry-thumbnail{
display:block
}

内容的提问来源于stack exchange，提问作者user22573153