Не перенаправляется на правую ссылку <a>в анимации слайдов - PullRequest
Новая
       30

Не перенаправляется на правую ссылку <a>в анимации слайдов

1 голос
/ 07 февраля 2020

AIM

При нажатии на кредитный значок Unspla sh я хочу, чтобы пользователь go указывал ссылку на фотографию автора.

ПРОБЛЕМА

Хотя правильные значки отображаются с соответствующими изображениями во время перехода при нажатии на любой из трех значков этой анимации, это всегда ссылка slide-3 , что пользователь перенаправлен на. Однако правая ссылка включена в href каждого из трех слайдов. Кажется, что последняя ссылка, т.е. ссылка последнего слайда (слайд-3), обналичена и полностью игнорирует две предыдущие ссылки, несмотря на то, что отображается правильный значок ...

Как это можно решить?

Обратите внимание, что код кредитного значка был предоставлен Unspla sh.

CODE 

body {
  margin: 0;
  padding: 0;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}

.slide-1 {
background-image: url("https://images.unsplash.com/photo-1580118797218-2413f9d2e36b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1778&q=80");
animation: fade1 10s infinite;
}
.slide-2 {
background-image: url("https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1754&q=80");
animation: fade2 10s infinite;
}
.slide-3 {
background-image: url("https://images.unsplash.com/photo-1581071727451-75cf45dc1bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
animation: fade3 10s infinite;
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
}

@keyframes fade2 {
  33% {
    opacity: 0;
  }

  67% {
    opacity: 1;
  }
}

@keyframes fade3 {
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
<body>

  <div class="slide slide-1">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@robertbahn?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Robert Bahn"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Robert Bahn</span></a>
  </div>

  <div class="slide slide-2">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@harleydavidson?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Harley-Davidson"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Harley-Davidson</span></a>
  </div>

  <div class="slide slide-3">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@mbuff?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Sung Jin Cho"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Sung Jin Cho</span></a>
  </div>

</body>

1 Ответ

4 голосов
/ 07 февраля 2020

При изменении opacity с 1 на 0 измените z-index с 100 на 10. Непрозрачность не отключает обработку событий (верхний слой все еще имеет обнаружение щелчков), но z-index перемещает видимые элементы вверх, чтобы искусственно изменить обработку. Рабочий пример можно найти здесь: CodePen

...