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

Question

我只是通过使用朋友的一些模块制作了这样的轮播。

问题是我将<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>