html - 单击时交叉淡入淡出图像库未指向正确的链接

Question

我正在制作 fiddle ，如下所示:

https://jsfiddle.net/t34kw6zj/7/embedded/result

上面的 fiddle 显示了图像的交叉淡入淡出库。这是我为实现这一目标而使用的 CSS 片段:

.featured-block a {
-webkit-animation-name: cf4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 8s;
    -moz-animation-name: cf4FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 8s;
    -o-animation-name: cf4FadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 8s;
    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 16s;
    position:absolute !important;
}

.featured-block a:nth-of-type(1) {
    animation-delay: 12s;
}

.featured-block a:nth-of-type(2) {
    animation-delay: 8s;
}

上面的 fiddle 有 4 张图片及其各自的链接:

1. logo1 https://www.w3schools.com/
2. logo2 https://developer.mozilla.org/en-US/
3. logo3 https://github.com/
4. logo4 https://www.espncricinfo.com/

单击上面的任何 Logo (logo1 或 logo2 或 logo3 或 logo4)时，它仅指向一个链接 ( https://www.espncricinfo.com/ )

问题陈述:

我想知道我应该在上面的 fiddle 中进行哪些更改，以便在单击上面 fiddle 中的任何 Logo 时它应该指向正确的链接。

例如，

=> 点击 logo1 它应该指向 https://www.w3schools.com/
=> 点击 logo2 它应该指向 https://developer.mozilla.org/en-US/
=> 点击 Logo 3 它应该指向 https://github.com/
=> 点击 logo4 它应该指向 https://www.espncricinfo.com/

Answer 1

让我们弄清楚发生了什么:

• 根据 position:absolute !important 规则，构成交叉淡入淡出库的所有 a 元素都堆叠在一起。
• 最后一个 a 元素 (logo4) 是标记中的最后一个 a，因此它将在外观中排在最前面。
• opacity 只是淡化元素，它不会暂时移动它，也不会移除它，因此最后一个 a 标签仍然在顶部即使它在交叉淡入淡出时不出现。

那么如何解决这个问题，只需修改关键帧并添加一个高值，例如999(高于1)，z-index 规则，当 opacity 设置为 1(元素可见)时，将其恢复为 1 不透明度 为 0(元素隐藏)。

这是一个演示:

.featured-block__item {
  flex-basis: calc(25% - 2rem);
  width: calc(25% - 2rem);
}

.featured-block__image img {
  width: 100%;
}

.featured-block a {
  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  position: absolute !important;
  opacity: 0;
}

.featured-block a:nth-of-type(1) {
  animation-delay: 0;
}

.featured-block a:nth-of-type(2) {
  animation-delay: 4s;
}

.featured-block a:nth-of-type(3) {
  animation-delay: 8s;
}

.featured-block a:nth-of-type(4) {
  animation-delay: 12s;
}

@keyframes cf4FadeInOut {
  0% {opacity: 0;}
    20% {opacity: 1;z-index: 999;}
    33% {opacity: 1;}
    53% {opacity: 0;z-index: 1;}
    100% {opacity: 0;}
}

<div class="featured-block" style="display:flex; justify-content: center;">
  <!-- For Position one -->
  <a href="https://www.google.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="http://i.imgur.com/EUqZ1Er.png" data-fallback-img="http://i.imgur.com/EUqZ1Er.png" alt="Outburst">
      </figure>
    </div>
  </a>
  <a href="https://www.facebook.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="http://i.imgur.com/D5yaJeW.png" data-fallback-img="http://i.imgur.com/D5yaJeW.png" alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>
  <a href="https://www.linkedin.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="http://i.imgur.com/R7A9JXc.png" data-fallback-img="http://i.imgur.com/R7A9JXc.png" alt="PrimeTime Politics">
      </figure>
    </div>
  </a>
  <a href="https://twitter.com" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://i.imgur.com/YhaIsPB.png" data-fallback-img="https://i.imgur.com/YhaIsPB.png" alt="PrimeTime Politics">
      </figure>
    </div>
  </a>
  <!-- For Position one -->
</div>