Question

我正在尝试在像这样的网站上创建一个效果：http://www.cssplay.co.uk/menu/css3-animation.html#x。我的代码目前仅使用两个图像，但我将使用大约10到15个最终动画。我试图实现悬停以查看动画，第二个图像，而不是点击效果。这是代码：

＆＃13;

    
    .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;
    }

＆＃13;

<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>

＆＃13;

到目前为止，只有图片1显示但悬停时没有任何反应。对我而言，我似乎使用的代码与网站上使用的代码相同。任何想法？
我已编辑代码以删除可能无关紧要的部分。如果需要更多代码，请告诉我，我可以包含您需要的内容，但这应该涵盖它。

Answer 1

以下是一个新示例：http://jsbin.com/wixume/5/edit

代码使用选择器

MARK UP：

<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;
}

将鼠标悬停在CSS链接上查看动画

1 个答案: