JavaScript：为轮播文本添加URL链接点击失效问题求助

问题根源 #

1. 结构不一致：部分文本用<a>包裹，部分直接用<h1>，导致CSS的:nth-child选择器无法按轮播顺序正确匹配元素——选择器是针对.carousel__text的父元素，而非.carousel的子元素顺序。
2. 点击区域被覆盖：未激活的文本元素仅设置了opacity: 0，但仍处于文档流中，会覆盖在激活元素上方，拦截点击事件。

修复方案 #

1. 统一轮播项结构：所有文本都放入<a>标签内，保证.carousel的子元素结构完全一致。
2. 禁止未激活元素的点击事件：给未激活的轮播项添加pointer-events: none，让点击能穿透到激活的元素上。
3. 调整CSS选择器：针对.carousel的子元素（即<a>标签）设置变换样式，再控制内部.carousel__text的显示状态。

修改后的完整代码 #

HTML

<div class="container">
  <div class="carousel" data-index="1">
    <a target="_blank" href="http://www.google.com" class="carousel__item">
      <h1 class="carousel__text">Text #1</h1>
    </a>
    <a target="_blank" href="http://www.google.com" class="carousel__item">
      <h1 class="carousel__text">Text #2</h1>
    </a>
    <a target="_blank" href="http://www.google.com" class="carousel__item">
      <h1 class="carousel__text">Text #3</h1>
    </a>
    <a target="_blank" href="http://www.google.com" class="carousel__item">
      <h1 class="carousel__text">Text #4</h1>
    </a>
    <a target="_blank" href="http://www.google.com" class="carousel__item">
      <h1 class="carousel__text">Text #5</h1>
    </a>
    <a target="_blank" href="http://www.google.com" class="carousel__item">
      <h1 class="carousel__text">Text #6</h1>
    </a>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel {
  position: relative;
  width: 100%;
  height: 4em;
  opacity: 0.6;
  margin-bottom: -10px;
}
.carousel .carousel__item {
  position: absolute;
  top: 0%;
  left: 50%;
  margin: 0;
  padding: 0;
  pointer-events: none; /* 禁止未激活项的点击 */
}
.carousel .carousel__text {
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 1s;
}
/* 激活的轮播项允许点击 */
.carousel[data-index="1"] .carousel__item:nth-child(1),
.carousel[data-index="2"] .carousel__item:nth-child(2),
.carousel[data-index="3"] .carousel__item:nth-child(3),
.carousel[data-index="4"] .carousel__item:nth-child(4),
.carousel[data-index="5"] .carousel__item:nth-child(5),
.carousel[data-index="6"] .carousel__item:nth-child(6) {
  pointer-events: auto;
}
.carousel[data-index="1"] .carousel__item:nth-child(1) .carousel__text {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="1"] .carousel__item:nth-child(2) .carousel__text {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="1"] .carousel__item:nth-child(3) .carousel__text {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__item:nth-child(4) .carousel__text {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="1"] .carousel__item:nth-child(5) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="1"] .carousel__item:nth-child(6) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__item:nth-child(1) .carousel__text {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__item:nth-child(2) .carousel__text {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__item:nth-child(3) .carousel__text {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="2"] .carousel__item:nth-child(4) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="2"] .carousel__item:nth-child(5) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="2"] .carousel__item:nth-child(6) .carousel__text {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="3"] .carousel__item:nth-child(1) .carousel__text {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__item:nth-child(2) .carousel__text {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="3"] .carousel__item:nth-child(3) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="3"] .carousel__item:nth-child(4) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="3"] .carousel__item:nth-child(5) .carousel__text {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="3"] .carousel__item:nth-child(6) .carousel__text {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__item:nth-child(1) .carousel__text {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="4"] .carousel__item:nth-child(2) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="4"] .carousel__item:nth-child(3) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__item:nth-child(4) .carousel__text {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="4"] .carousel__item:nth-child(5) .carousel__text {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="4"] .carousel__item:nth-child(6) .carousel__text {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__item:nth-child(1) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__item:nth-child(2) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__item:nth-child(3) .carousel__text {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="5"] .carousel__item:nth-child(4) .carousel__text {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="5"] .carousel__item:nth-child(5) .carousel__text {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="5"] .carousel__item:nth-child(6) .carousel__text {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__item:nth-child(1) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-15deg) translateY(-0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__item:nth-child(2) .carousel__text {
  transform: translate(-50%, -50%) rotateX(0deg) translateY(0em) translateZ(5em);
  opacity: 1;
}
.carousel[data-index="6"] .carousel__item:nth-child(3) .carousel__text {
  transform: translate(-50%, -50%) rotateX(15deg) translateY(0.77646em) translateZ(4.82963em);
}
.carousel[data-index="6"] .carousel__item:nth-child(4) .carousel__text {
  transform: translate(-50%, -50%) rotateX(30deg) translateY(1.5em) translateZ(4.33013em);
}
.carousel[data-index="6"] .carousel__item:nth-child(5) .carousel__text {
  transform: translate(-50%, -50%) rotateX(45deg) translateY(2.12132em) translateZ(3.53553em);
}
.carousel[data-index="6"] .carousel__item:nth-child(6) .carousel__text {
  transform: translate(-50%, -50%) rotateX(-30deg) translateY(-1.5em) translateZ(4.33013em);
}

JavaScript

const carousel = document.querySelector('.carousel');
const textCount = carousel.querySelectorAll('.carousel__item').length;

let index = 1;
setInterval(() => {
  index = index === 1 ? textCount : index - 1;
  carousel.dataset.index = index;
}, 2000);

关键说明 #

• 统一用.carousel__item作为轮播项容器，确保:nth-child选择器能准确匹配轮播顺序。
• 给未激活的.carousel__item设置pointer-events: none，避免它们拦截点击事件。
• JS中把querySelectorAll('.carousel__text')改为querySelectorAll('.carousel__item')，保证计数正确。

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