html - 将鼠标悬停在带有 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;
}