悬停以查看与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; 
}