CSS - 轮播幻灯片中的链接跳转到错误的位置

Question

我只是用我 friend 的一些模块做了一个像这样的轮播。

问题出在我输入<a>之后链接到每张幻灯片，链接只是跳转到下一张幻灯片，而不遵循 HTML 顺序。

当您切换到幻灯片 2 时，首先，它显示幻灯片 2 的链接 (link2)，但在大约 0.5 秒后它跳转到幻灯片 1 的链接 (link1)。与幻灯片 3 相同，显示链接 3，然后立即跳转到链接 2。

知道刚刚发生了什么吗？

您也可以在 Codepen 上运行这里的代码:https://codepen.io/hanh2122011/pen/rbEmOw

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-open:checked + .carousel-item {
  position: static;
  opacity: 100;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-item a {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-control {
  color: #eaeaea;
  cursor: pointer;
  display: none;
  font-size: 50px;
  height: 20em;
  width: 10%;
  line-height: 20em;
  position: absolute;
  top: 46%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  z-index: 10;
  vertical-align: middle;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none;
}

.carousel-control.prev {
  position: absolute;
}

.carousel-control.next {
  right: 0%;
}


#i1:checked ~ .control-1,
#i2:checked ~ .control-2,
#i3:checked ~ .control-3 {
  display: block;
}

<div class="carousel">
  <div class="carousel-inner">

      <!-- slide 1 -->

      <input class="carousel-open" type="radio" id="i1" name="carousel" aria-hidden="true" hidden="" checked="checked">
      <div class="carousel-item">
        <a class="slides" target="_blank" href="https://link1.com">
          <img src="https://i.ibb.co/6W3MvYJ/slide1.png">



        </a>
      </div>

      <!-- slide 2 -->

      <input class="carousel-open" type="radio" id="i2" name="carousel" aria-hidden="true" hidden="">
      <div class="carousel-item">
        <a class="slides" target="_blank" href="https://link2.com">
          <img src="https://i.ibb.co/Qvtjrng/slide2.png">

        </a>
      </div>

      <!-- slide 3 -->

      <input class="carousel-open" type="radio" id="i3" name="carousel" aria-hidden="true" hidden="">
      <div class="carousel-item">
        <a class="slides" target="_blank" href="https://link3.com">
          <img src="https://i.ibb.co/WKVKtmm/slide3.png">
        </a>
      </div>

      <label for="i3" class="carousel-control prev control-1">‹</label>
      <label for="i2" class="carousel-control next control-1">›</label>
      <label for="i1" class="carousel-control prev control-2">‹</label>
      <label for="i3" class="carousel-control next control-2">›</label>
      <label for="i2" class="carousel-control prev control-3">‹</label>
      <label for="i1" class="carousel-control next control-3">›</label>

  </div>

Answer 1

这是一个堆叠顺序问题，可以用 CSS negation 解决。和 z-index。对于未选中(非事件)轮播元素，我们将应用负 z-index，仅将事件元素的链接留在“顶部”。这将允许在正确的时间访问正确的链接。

这是我要添加到您的样式中的内容:

.carousel-open:not(:checked)+.carousel-item {
  z-index: -1;
}

演示

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 100;
}

.carousel-open:not(:checked)+.carousel-item {
  z-index: -1;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-item a {
  display: block;
  height: auto;
  max-width: 100%;
}

.carousel-control {
  color: #eaeaea;
  cursor: pointer;
  display: none;
  font-size: 50px;
  height: 20em;
  width: 10%;
  line-height: 20em;
  position: absolute;
  top: 46%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  z-index: 10;
  vertical-align: middle;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.carousel-control.prev {
  position: absolute;
}

.carousel-control.next {
  right: 0%;
}

#i1:checked~.control-1,
#i2:checked~.control-2,
#i3:checked~.control-3 {
  display: block;
}

<div class="carousel">
  <div class="carousel-inner">

    <!-- slide 1 -->

    <input class="carousel-open" type="radio" id="i1" name="carousel" aria-hidden="true" hidden="" checked="checked">
    <div class="carousel-item">
      <a class="slides" target="_blank" href="https://link1.com">
        <img src="https://i.ibb.co/6W3MvYJ/slide1.png">



      </a>
    </div>

    <!-- slide 2 -->

    <input class="carousel-open" type="radio" id="i2" name="carousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <a class="slides" target="_blank" href="https://link2.com">
        <img src="https://i.ibb.co/Qvtjrng/slide2.png">

      </a>
    </div>

    <!-- slide 3 -->

    <input class="carousel-open" type="radio" id="i3" name="carousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <a class="slides" target="_blank" href="https://link3.com">
        <img src="https://i.ibb.co/WKVKtmm/slide3.png">
      </a>
    </div>

    <label for="i3" class="carousel-control prev control-1">‹</label>
    <label for="i2" class="carousel-control next control-1">›</label>
    <label for="i1" class="carousel-control prev control-2">‹</label>
    <label for="i3" class="carousel-control next control-2">›</label>
    <label for="i2" class="carousel-control prev control-3">‹</label>
    <label for="i1" class="carousel-control next control-3">›</label>

  </div>
</div>