我越来越困惑的是，为什么中间的 <a href> 链接不起作用（Tahiti和 Hawaii）。h2链接和图片链接都能工作，但目标链接却不行。把鼠标悬停在每个链接上，浏览器左下角的URL弹窗会显示，但中间两个无法跳转。

<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 href>，把图片移到顶部。也尝试过不使用 <header>，并把 <a href> 链接放在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被分配给父级div。

.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;
}

这很可能是一些显而易见的东西，我自己看不到。

解决方案

并不是HTML或 CSS的问题，但看来是JS的问题。

在我们JS文件的事件委托部分，有一个 e.preventDefault(); 与其他内容没有关联。移除它解决了问题。

但这让我百思不得其解，为什么它只影响每个卡片中四个链接中的其中两个，而不是全部链接。当前在事件委托部分没有对这些卡片的链接进行目标设定。