[英]HTML/CSS - links not working
I have a rotating carousel done using webkit animation and CSS. 我有一个使用webkit动画和CSS完成的旋转轮播。 There are 3 items under the carousel and each item has a photo and a blurb of text. 旋转木马下面有3个项目,每个项目都有一张照片和一组文字。 I'm trying to link the text to 3 different links. 我正在尝试将文本链接到3个不同的链接。
Right now all 3 text boxes are linked to the same link ( the last one ). 现在所有3个文本框都链接到同一个链接(最后一个)。 I have a feeling it might have something to do with z-index, but I'm not sure. 我觉得它可能与z-index有关,但我不确定。 I've put all my code into a jsfiddle. 我已将所有代码放入jsfiddle中。
http://jsfiddle.net/LGbbf/1/ http://jsfiddle.net/LGbbf/1/
Any help is appreciated! 任何帮助表示赞赏!
HTML code involved 涉及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 code involved 涉及的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;
}
just Try this It's working 试试这个它的工作原理
Change Keyframe css 更改关键帧css
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;}
}
Here is updated fiddle http://jsfiddle.net/LGbbf/3/ 这是更新的小提琴http://jsfiddle.net/LGbbf/3/
Hope It Helps you :) 希望它能帮助你:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.