本文解决轮播（carousel）中文字链接无法点击的问题，核心方案是通过 CSS 的 pointer-events 属性动态控制链接的交互状态，确保仅当前显示的文本项具备可点击能力。
本文解决轮播（carousel）中文字链接无法点击的问题，核心方案是通过 css 的 `pointer-events` 属性动态控制链接的交互状态，确保仅当前显示的文本项具备可点击能力。
在基于 CSS 变换与 data-index 控制的 3D 轮播实现中，常见误区是直接将 <a> 标签包裹 <h1>（如 <a><h1>Text</h1></a>），但因所有文本元素均使用 position: absolute 叠加在同一区域，且默认 z-index 未显式声明，导致非当前激活项仍可能捕获鼠标事件，或更关键的是：当前可见项的链接被其父级 .carousel__text 的层叠上下文或透明度/动画属性意外阻断点击流。
根本原因在于：当多个绝对定位元素重叠时，即使某元素视觉上“隐藏”（opacity: 0 或 transform 移出视口），只要其 DOM 节点存在且 pointer-events 未禁用，就可能干扰底层链接的点击穿透——尤其当链接嵌套在 <h1> 内部时，外层容器的 pointer-events: none 缺失会导致事件无法传递至 <a>。
✅ 正确做法是采用分层控制策略：
-
统一禁用所有文本容器的指针事件：
在基础样式中设置 .carousel__text { pointer-events: none; cursor: default; }，确保 <h1> 本身不响应任何鼠标操作； -
仅为当前激活项的链接容器启用交互：
利用 data-index 动态选择器（如 .carousel[data-index="1"] .carousel__link），将 pointer-events: auto 和 cursor: pointer 精准赋予对应项； -
语义化结构优化：
将 <a> 标签作为 <h1> 的子元素（而非反向包裹），既符合 HTML5 语义（标题内含链接合法），又避免外层块级元素拦截事件。
以下是完整可运行的修复方案：
<div class="container">
<div class="carousel" data-index="1">
<!-- ✅ 正确结构：a 是 h1 的子元素 -->
<h1 class="carousel__text carousel__link">
<a target="_blank" href="https://www.google.com">Text #1</a>
</h1>
<h1 class="carousel__text">Text #2</h1>
<h1 class="carousel__text">Text #3</h1>
<h1 class="carousel__text">Text #4</h1>
<h1 class="carousel__text">Text #5</h1>
<h1 class="carousel__text">Text #6</h1>
</div>
</div>.carousel .carousel__text {
position: absolute;
top: 0%;
left: 50%;
margin: 0;
padding: 0;
opacity: 0;
transition: all 1s;
pointer-events: none; /* 关键：禁用所有文本容器的交互 */
cursor: default;
}
/* 仅对当前激活项的链接容器启用点击 */
.carousel[data-index="1"] .carousel__link,
.carousel[data-index="2"] .carousel__link,
.carousel[data-index="3"] .carousel__link,
.carousel[data-index="4"] .carousel__link,
.carousel[data-index="5"] .carousel__link,
.carousel[data-index="6"] .carousel__link {
pointer-events: auto;
cursor: pointer;
}
/* 各 index 下的 transform 规则（保持原逻辑不变）... */const carousel = document.querySelector('.carousel');
const textCount = carousel.querySelectorAll('.carousel__text').length;
let index = 1;
setInterval(() => {
index = index === textCount ? 1 : index + 1; // 修正：原逻辑为倒序，此处按常规正向轮播调整
carousel.dataset.index = index;
}, 2000);⚠️ 注意事项：
- 原问题代码中 index 更新逻辑为 index === 1 ? textCount : index - 1，实现的是逆序轮播（6→5→4…→1），若需正向循环（1→2→3…→6），请将 setInterval 内部改为 index = index === textCount ? 1 : index + 1；
- 确保每个 <a> 标签的 href 属性值有效（建议使用 https:// 协议）；
- 若需支持键盘访问（无障碍），可为 .carousel__link a 添加 tabindex="0" 并监听 Enter/Space 键触发跳转；
- 在复杂动画场景中，避免对 .carousel__link 直接设置 transform，优先通过其子 <a> 或内部 <span> 承载变换，防止 pointer-events 失效。
此方案无需依赖 jQuery，纯原生 CSS/JS 即可稳定工作，兼顾可访问性、性能与维护性。
