Question

我尝试使用交叉淡化横幅，如果您点击不同的图片，他们会将您发送到每个图片的不同网址。到目前为止，我已正确定位和交叉淡化对象，并且我还将所有4个图像包含在标记中，将您带到一个URL，但是当我尝试将每个图像包装在不同URL的单个标记中时，单独包装的图像将停止出现在交叉淡入淡出中并且链接不起作用。我已尝试过多种方法来尝试修复此问题，例如：

<div onclick="location.href='#';" style="cursor: pointer;">
</div>

风格=＆＃34;显示：块＆＃34;

<a>
<div>
"image" ( <- I now know it is illegal syntax to put <div> inside <a>)
</div>
</a>

所有这些最终都会出现没有出现的图像组合/只有一个链接正在工作/交叉淡入淡出完全失败。

我是HTML / CSS编程的新手，但我确实有其他语言的背景编程，我觉得我想做的很容易，我只是缺少一些东西。在此先感谢您的帮助，请参阅下面的代码。

/*HTML*/
<div id="cf">
<a id="StoreLink" title="Real Supplies Store" href="https://realsupplies1.merchanttribestores.com/products">Online Store&lt; 
<img class="top" src="../../images/sites/4968/storeassets/cleaning-equipment-banner.png" alt="" /> 
<img class="top" src="../../images/sites/4968/storeassets/secure-units-banner.png" alt="" /> 
<img class="top" src="../../images/sites/4968/storeassets/groundcare-banner.png" alt="" /> 
<img class="top" src="../../images/sites/4968/storeassets/heating-and-cooling-banner.png" alt="" />
</a>
</div>


/*CSS*/
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
  }

#cf img {
  position:absolute;
  left:-150px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  }

@keyframes cfFadeInOut {
  0% {
    opacity:1;
  }
  21% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  96% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf img:nth-of-type(1) {
  animation-delay: 21s;
}
#cf img:nth-of-type(2) {
  animation-delay: 14s;
}
#cf img:nth-of-type(3) {
  animation-delay: 7s;
}
#cf img:nth-of-type(4) {
  animation-delay: 0s;
}

#cf img {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 28s;
animation-direction: normal;
}

CSS交叉淡化图像，每个图像具有不同的可点击链接

0 个答案: