我的滑块的链接,只是第一个工作,其余的覆盖。
我有三个链接,但只有一个可以使用。
我认为这是 z-index 的问题。但是我不能让它发挥作用。
CSS 详细信息请参阅codepen上的链接。
<div class="gallery autoplay items-3" style="position: absolute; top: 110px;">
<figure class="item">
<img src="http://comercialbv.com.br/slide/image/banner-kit-utilidades.jpg" alt="Olha só o presente que você vai dar no Dia dos Pais!" usemap="#kitchurrasco" id="kitchurrasco">
</figure>
<figure class="item">
<img src="http://comercialbv.com.br/slide/image/banner-rechauds.jpg" alt="Rechaud Banho Maria GN 1/2 65mm - F433-02" usemap="#rechaud" id="rechaud">
</figure>
<figure class="item">
<img src="http://comercialbv.com.br/slide/image/banner-refrigerador.jpg" alt="Promoção Exclusiva! Refrigerador Expositor 360 Litros LG-360" usemap="#refrigerator" id="refrigerator">
<map name="kitchurrasco" id="kitchurrasco">
<area alt="Kit p/ Churrasco Aço Inox - Mundial" href="http://yahoo.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self" />
<area shape="rect" coords="845,298,847,300" alt="Kit p/ Churrasco Aço Inox - Mundial" style="outline:none;" title="Kit p/ Churrasco Aço Inox - Mundial" href="http://yahoo.com" />
</map>
<map name="rechaud" id="rechaud">
<area alt="Rechaud Banho Maria Aço Inox GN 1/2 65mm 9 Litros" title="Rechaud Banho Maria Aço Inox GN 1/2 65mm 9 Litros" href="http://www.google.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self" />
<area shape="rect" coords="845,298,847,300" alt="Rechaud Banho Maria Aço Inox GN 1/2 65mm 9 Litros" style="outline:none;" title="Rechaud Banho Maria Aço Inox GN 1/2 65mm 9 Litros" href="http://www.google.com" />
</map>
<map name="refrigerator" id="refrigerator">
<area alt="Promoção Exclusiva! Refrigerador Expositor 360 Litros LG-360" href="http://www.bing.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self" />
<area shape="rect" coords="845,298,847,300" alt="Promoção Exclusiva! Refrigerador Expositor 360 Litros LG-360" style="outline:none;" title="Promoção Exclusiva! Refrigerador Expositor 360 Litros LG-360" href="http:/www.bing.com" />
</map>
</div>
答案 0 :(得分:0)
是的,只需确保100%的z-index为1 -
@keyframes controlAnimation-2 {
0% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
z-index: 7;
}
14.3%,
50% {
color: white;
color: rgba(255, 255, 255, 0.8);
z-index: 7;
}
64.3%,
100% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
z-index: 1;
}
}