伪元素使用后链接无法点击？边框悬停动画致链接失效求助

我来帮你搞定这个问题！这种情况几乎都是边框动画的实现逻辑不小心拦截了链接的点击事件，或者动画元素的层级盖过了链接，给你几个针对性的解决思路，结合你的HTML结构来调整就行：

• 提升链接的层级优先级
  很多边框动画会用伪元素（::before/::after）来实现，这些伪元素默认的层级可能比内部链接高，导致点击被伪元素“吃掉”。你可以给链接所在的<a>标签加相对定位和更高的z-index，让它跑到动画元素上面：

  .read-more a {
    position: relative;
    z-index: 10; /* 数值只要比动画元素的z-index高就行 */
  }
  

• 让动画元素不拦截点击
  如果你的边框动画元素（比如做边框效果的容器或伪元素）不需要响应任何点击操作，可以给它加pointer-events: none，这样点击会直接穿透到下方的链接：

  /* 假设你的边框动画是加在.image-cover或.first类上的伪元素 */
  .image-cover::before {
    pointer-events: none;
    /* 你的原有动画样式保持不变 */
  }
  

  注意：如果这个动画元素本身需要交互（比如点击触发动画），这个方法就不适用了。

• 强制开启链接的点击响应
  要是你的父容器因为动画被设置了pointer-events: none，可以单独给链接重置这个属性，强制让它能被点击：

  .read-more a {
    pointer-events: auto;
  }
  

• 检查动画关键帧的层级变化
  有些动画会在执行过程中修改容器的z-index或position属性，动画结束后没重置，导致链接被永久覆盖。你可以检查一下动画的@keyframes代码，确保动画结束后元素的层级不会影响到内部链接。

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