HTML/CSS - ссылки не работают

У меня есть вращающаяся карусель с использованием анимации webkit и CSS. Есть три предмета под карусели, и у каждого предмета есть фотография и рекламный текст. Я пытаюсь связать текст с тремя различными ссылками.HTML/CSS - ссылки не работают

В настоящее время все 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; 
}

источник

2014-02-03 user3264603

это только, что непрозрачность меняется и в этом случае, да, г-индекс должен измениться. –

просто попробовать это Он работает

Изменение Keyframe 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/

Надеюсь, это поможет вам :)

источник

2014-02-03 06:10:12

Это мой приятный человек :) –

HTML/CSS - ссылки не работают

ответ

Смежные вопросы