为带悬停动画覆盖层的HTML图片添加跳转链接遇阻求助

你的<a>标签虽然占满了整个容器，但鼠标悬停时显示的.content和.tagline是绝对定位元素，它们的层级默认和<a>标签一致（甚至因后渲染而更高），导致点击事件被这两个文本容器拦截，无法触发<a>的跳转。

有两种简单的修复方式：

方式1：提升<a>标签的层级 #

给.link-tag添加z-index属性，让它处于所有元素的最上层，确保点击事件能被它捕获：

.link-tag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 设为比content和tagline更高的值即可 */
}

这种方式无需修改HTML结构，仅需添加一行CSS代码。

方式2：将文本容器嵌套进<a>标签内 #

调整HTML结构，把.content和.tagline放到<a>标签内部，这样整个点击区域（包括显示的文本）都会触发跳转：

<div class="img-wrapper">
    <a href="albums/Armed Forces Day 2022.html" class="link-tag" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;">
        <div class="content fade">Armed Forces Day Scarborough 2022</div>
        <div class="tagline fade">2022</div>
    </a>
    <img src="src/img/albums/Armed Forces Day 2022/RAF Falcons underneath parachute canopy.JPG"></img>
</div>

原有CSS样式无需调整，选择器依然生效。

• 给.link-tag添加cursor: pointer，鼠标悬停时显示手型，提升用户体验：

.link-tag {
    /* 原有样式 */
    cursor: pointer;
}

• 你的CSS中.img-wrapper重复定义了margin-bottom，后者会覆盖前者，建议简化为margin: 25px 0 7px 7px。

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