css - 在 slider css 中正确设置 z-index

Question

我的 slider 的链接，只有第一个有效，其余的被覆盖。

我有三个链接，但只有一个有效。

我认为这是 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>

http://codepen.io/anon/pen/QbzopM

Answer 1

是的，只需确保 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;
    }
}