懸停以查看與CSS鏈接的動畫

Question

我試圖在以下網站上創建效果：http://www.cssplay.co.uk/menu/css3-animation.html#x。我的代碼目前只使用兩個圖像，但我將使用大約10到15作爲最終動畫。我試圖實現懸停查看動畫，第二個圖像，而不是點擊效果。下面的代碼：

 
 
    .footer nav ul.homeandlist li { 
 
     display: block; 
 
     width: 40%; 
 
     height: 150px; 
 
     float: left; 
 
     margin: 1% 3%; 
 
     background-color: rgba(255, 165, 0, 0.11); 
 
    } 
 
    .footer nav ul.homeandlist a { 
 
     margin: 0; 
 
     padding: auto; 
 
     width: 100%; 
 
     height: 90px; 
 
     text-indent: -9000px; 
 
     line-height: 2em; 
 
     font-size: 16px; 
 
     display: block; 
 
    } 
 
    .footer nav ul.homeandlist .GetOnList { 
 
     position: relative; 
 
     width: 40%; 
 
     height: 150px; 
 
    } 
 
    .footer nav ul.homeandlist .GetOnList a { 
 
     display: block; 
 
     -webkit-transition: z-index 0.1s linear; 
 
     transtion: z-index 0.1s linear; 
 
    } 
 
    .footer nav ul.homeandlist .GetOnList a#a1 { 
 
     background: url('images/image1.png'); 
 
    } 
 
    .footer nav ul.homeandlist .GetOnList a#a2 { 
 
     background: url('images/image2.png'); 
 
    } 
 
    .footer nav ul.homeandlist .hover a:hover { 
 
     z-index: 20; 
 
    } 
 
    .footer nav ul.homeandlist .hover a:hover + a { 
 
     z-index: 30; 
 
    } 
 
    .footer nav ul.homeandlist .hover a#a1 { 
 
     z-index: 20; 
 
    } 
 
    .footer nav ul.homeandlist .hover a#a2 { 
 
     z-index: 10; 
 
    }

<div class="footer"> 
 

 
    <nav> 
 

 
    <p class="footertext">Text will go here</p> 
 
    <div class="clear"></div> 
 
    <ul class="homeandlist"> 
 

 
     <li class="GetOnList hover"> 
 
     <a id="a1" href="GetOnList.html">Get On List</a> 
 
     <a id="a2" href="GetOnList.html">Get On List</a> 
 
     </li> 
 

 
     <li class="HomeLink"><a href="index.html" title="HomeLink">HomeLink</a> 
 
     </li> 
 

 
    </ul> 
 

 
    
 
    </nav> 
 

 

 

 
</div>

到目前爲止，只有圖像1顯示了，但沒有任何反應懸停。對我來說，看起來我使用的是與網站上使用的代碼相同的代碼。有任何想法嗎？
我編輯了代碼，刪除可能無關緊要的部分。如果需要更多代碼，請告訴我，我可以包含您需要的內容，但這應該涵蓋它。

Answer 1

這裏有一個新的例子：http://jsbin.com/wixume/5/edit

代碼使用選擇器來

標記：

<div class="footer"> 
    <nav> 
    <ul class="homeandlist"> 
     <li id="addedId"><a id="a1">Get On List</a></li> 
     <li id="anotherAddedId"><a id="a2">Get On List</a></li> 
     <li id="lastOne"><a id="a3">Get On List</a></li> 
    </ul> 
    </nav> 
</div> 

CSS：

.footer nav ul.homeandlist li { 
     display: block; 
} 
.footer nav ul.homeandlist a { 
     width: 100%; 
     height: 90px; 
     display: block; 
} 
a{ 
position:absolute; 
} 
.footer nav ul.homeandlist li { 
    position: absolute; 
    width: 40%; 
    height: 150px; 
} 
.footer nav ul.homeandlist li { 
    display: block; 
    -webkit-transition: z-index 0.9s linear; 
    transtion: z-index 0.9s linear; 
} 
#a1 { 
    background-color: red; 
} 
#a2 { 
    background-color: yellow; 
} 
#a3 { 
    background-color: blue; 
} 
#addedId:hover { 
    /* Move the first one to the bottom when hover*/ 
    z-index: 9; 
} 
li:hover + li { 
    /* 
    Move the second li to the top 
    If move mouse, the element below it gets selected and moved to the top. 
    ...and so on for each one below that... 
    Once are hovering on the bottom one and we move, 
    nothing for a moment has a hover state so we can see the top li. 
    And then it starts all back over. 
    */ 
    z-index: 30; 
} 
#addedId { 
    z-index: 20; 
} 
#anotherAddedId { 
    z-index: 19; 
} 
#lastOne:{ 
    z-index:10; 
}