CSS overlay覆盖层遮挡导致图片链接无法点击该如何解决？

问题根因 #

.image__overlay 采用绝对定位覆盖在图片链接上方，即使设置了opacity: 0视觉上不可见，元素依然实际存在于页面中，会拦截所有鼠标点击事件，导致下层的<a>标签无法响应点击。

可用修复方案 #

方案1：添加pointer-events属性（最简便，适配当前场景） #

给.image__overlay添加pointer-events: none规则，让该元素完全不响应鼠标交互，点击事件会直接穿透到下层的链接元素，overlay的悬停显示效果完全不受影响。
修改后的CSS代码：

.image__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s;
    /* 新增规则 */
    pointer-events: none;
}

适用场景：overlay内部没有需要点击的交互元素，仅用于展示悬浮提示内容

方案2：提升链接层级 #

给下层的图片链接设置相对定位和更高的z-index，让链接层级高于overlay，自然就能响应点击。
需要新增的CSS规则：

.image__img {
    position: relative;
    z-index: 1;
}

适用场景：需要overlay完全不干扰链接交互，且不需要在overlay上添加任何点击事件

方案3：调整HTML结构，用链接包裹所有内容 #

直接把<a>标签的范围扩大，同时包裹img和overlay元素，这样不管点击图片区域还是overlay区域，都会触发链接跳转，从根源上避免遮挡问题。
修改后的HTML代码：

<div class="image">
  <A HREF="Carta-Apotheke.pdf" class="image__img" target="_blank">
    <img src="img/A.png" alt="Image" height="375" width="225" alt="Reserva">
    <div class="image__overlay image__overlay--blur">
      <div class="image__title">Cart</div>
      <p class="image__description"> Here we have a brick wall.</p>
    </div>
  </a>
</div>

适用场景：希望整个图片容器（包括悬浮的overlay区域）点击都能跳转，逻辑更统一

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