Flexbox容器内锚点(a标签)无法触发点击跳转问题排查

云原生阿岚

2026-5-14

解决Flex容器内锚点链接无法跳转的问题

我一眼就发现两个关键问题导致你的链接无法正常跳转，咱们一步步来修复：

1. 锚点标签的属性使用错误

你给<a>标签写了src属性，这是完全不对的！<a>标签指定跳转链接的正确属性是href——src是给<img>、<script>这类标签用来加载资源的。先把这个基础错误修正：

<a class="flex_col" href="http://www.cnn.com">

2. 内部元素拦截了点击事件

你的.circle_shape:before伪元素和.circle_text div都是绝对定位，完全覆盖了整个链接区域，它们默认会接收所有鼠标点击事件，导致底层的<a>标签根本拿不到点击信号。解决方法是给这些装饰性/文本层添加pointer-events: none;，让点击直接穿透到下面的锚点：

修改你的CSS代码：

.circle_shape:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  filter: blur(5px);
  z-index: 2;
  pointer-events: none; /* 添加这行，让点击穿透 */
}

.circle_text{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,51,102, 0.9);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  transform: scale(0);
  pointer-events: none; /* 添加这行，让点击穿透 */
}