HTML / CSS – 链接不起作用

2024年1月9日 200次阅读

我有一个使用webkit动画和CSS完成的旋转轮播.旋转木马下面有3个项目,每个项目都有一张照片和一组文字.我正在尝试将文本链接到3个不同的链接.

现在所有3个文本框都链接到同一个链接(最后一个).我觉得它可能与z-index有关,但我不确定.我已将所有代码放入jsfiddle中.

http://jsfiddle.net/LGbbf/1/

任何帮助表示赞赏！

涉及HTML代码

<div class="gallery-area">
    <ul>
        <li>
            <div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/IYF-Family-Treasures.jpg" /> </div>
            <div class="txt-box">
                <p><a href="http://app.msf.gov.sg/IYFNewsBuzz.aspx">Send in a photo of your family, friends and neighbours enjoying the Chinese New Year festivities and stand to WIN a $400 IKEA Gift Card ANG BAO! <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></a></p>
            </div>
        </li>
        <li>
            <div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/cny.png" /> </div>
            <div class="txt-box">
                <p><a href="http://app.msf.gov.sg/IYFEvents.aspx">Chinese New Year is a time when families get together to celebrate. Check out the events where you and your family can celebrate during this festive period. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></a></p>
            </div>
        </li>
        <li>
            <div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/AboutIYF_carousel_ver4.png" /> </div>
            <div class="txt-box">
                <p><a href="http://app.msf.gov.sg/AboutIYF2014.aspx">2014 is the International Year of the Family. We invite all to join us in the spirit of love and respect, commitment and big-heartedness. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></a></p>
            </div>
        </li>
    </ul>
</div>

涉及的CSS代码

.info-img-box {
    box-shadow:0 9px 6px -6px #929292;
    -webkit-box-shadow:0 9px 6px -6px #929292;
    overflow:hidden;
    position:relative;
    margin:0 0 32px;
}
.info-img-box img {
    vertical-align:top;
}
.info-img-box .txt-box {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background:url(http://app.msf.gov.sg/Portals/0/Files/IYF/bg-txt-box-img.png);
    padding:8px 0 10px;
}
.info-img-box .txt-box img{
    vertical-align:middle;
}
.info-img-box .txt-box p {
    margin:0 13px;
    font:13px/16px "Lato", Arial, Helvetica, sans-serif;
}
.info-img-box .txt-box a {
    color:#fff;
    text-decoration:none;
}
.info-img-box .txt-box a:hover {
    text-decoration:underline;
}
.quote-area:after {
    content:"";
    clear:both;
    display:block;
}

最佳答案 试试这个它的工作原理

更改关键帧css

CSS：

        @-webkit-keyframes round{
        0%{opacity:1; z-index:1111}
        27%{opacity:1; z-index:1111;}
        33%{opacity:0; z-index:0;}
        94%{opacity:0; z-index:0;}
        100%{opacity:1; z-index:1111;}
        }
        @keyframes round{
        0%{opacity:1; z-index:1111}
        27%{opacity:1; z-index:1111;}
        33%{opacity:0; z-index:0;}
        94%{opacity:0; z-index:0;}
        100%{opacity:1; z-index:1111;}
        }

这里更新了小提琴http://jsfiddle.net/LGbbf/3/

希望它能帮助你:)

点赞