单击时交叉淡入淡出图像库不指向右侧 link

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 张图像，它们各自的 links:

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

单击上面的任何徽标（logo1 或 logo2 或 logo3 或 logo4）时，它仅指向一个 link (https://www.espncricinfo.com/)

问题陈述：

我想知道我应该在上面的 fiddle 中做些什么更改，以便在单击上面 fiddle 中的任何徽标时它应该指向右边 link。

例如，

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

Answer 1

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

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

那么如何解决这个问题，只需修改 keyframe 并添加一个高值，例如 999（高于 1），z-index 规则当 opacity 设置为 1（元素可见），当 opacity 为 0（元素 隐藏时，将其恢复为 1 ).

这是一个演示：

.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>

单击时交叉淡入淡出图像库不指向右侧 link

cross-fade gallery of images not pointing towards the right link on click

html

css

click

css-animations