卡片组件内部分<a>标签链接无法点击的问题求助

DevOps 小满

2026-4-13

我现在遇到一个头疼的问题——卡片里中间的两个<a>链接（Tahiti和Hawaii）怎么都点不了！但是h2外面的链接和图片的链接都能正常工作。鼠标悬停的时候，浏览器左下角的地址栏明明能显示这两个链接的地址，就是点不动，实在搞不懂哪里出问题了。

原始代码如下：

<div class="card">
  <div class="dark">
    <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm">
      <header><h2 class="title3">South Pacific Bike Tours</h2></header>
    </a>
    <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>,
    <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a>
  </div>
  <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"><img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia"></a>
</div>

我已经试过好几种调整方式了，比如去掉图片外面的<a>标签、把图片移到顶部，还试过去掉<header>标签，把<a>直接放到H2标签里面，但都没解决问题。下面是我试过的几种代码变体：

<div class="card">
  <div class="dark">
    <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm">
      <header><h2 class="title3">South Pacific Bike Tours</h2></header>
    </a>
    <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>,
    <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a>
  </div>
  <img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia">
</div>

<div class="card">
  <img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia">
  <div class="dark">
    <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm">
      <header><h2 class="title3">South Pacific Bike Tours</h2></header>
    </a>
    <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>,
    <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a>
  </div>
 </div>

下面是作用在这些卡片上的CSS代码，父容器使用的是cardcontainer类：

.cardcontainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.card {
  flex-grow: 0;
  flex-shrink: 0;
  height: 50vh;
  max-height: 325px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  font-size: 1.6rem;
  text-shadow: 1px 1px 1px rgb(0, 0, 0), 0 0 7px rgba(60, 48, 40,.85), 0 0 15px rgba(60, 48, 40,.55);
  overflow: hidden;
  cursor: pointer;
  border-radius: 50px 15px;
  box-shadow: 2px 2px 10px rgba(60,48,40,0.5);
}

.card .dark {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 20px 20px 25px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(33, 33, 33, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
}

a {
  text-decoration: none;
}

我感觉这肯定是个很明显的问题，但我现在当局者迷，实在看不出来哪里错了……

备注：内容来源于stack exchange，提问作者MrCycling