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

问题描述 投票:1回答:1

我只是通过使用我朋友的一些模块制作了这样的旋转木马。

问题是在我将<a>链接到每张幻灯片后,链接只是跳转到下一张幻灯片而不遵循HTML命令。

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

知道刚刚发生了什么吗?

您也可以在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>
html css html5
1个回答
0
投票

这是一个堆叠顺序问题,可以用CSS negationz-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>
© www.soinside.com 2019 - 2024. All rights reserved.