Question

我有一个标题，当悬停在上方时会向下移动块（#Container），打开一个菜单的空间，这个菜单在将鼠标悬停在标题上时也会缓慢显示。

CSS

#MenuWrapper {
    display: block;
    position: relative;
    width: 979px;
    height: 190px;
    top: 155px;
    margin-top: 5px;
    border: #FFF 1px solid;
    background: #000;
    opacity: 0;
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 8s;
    }

#Header:hover + #Container {
    top: 195px;
    opacity: 0.3;
    }

#Header:hover #MenuWrapper {
    opacity: 0.5;
    }

HTML

<div id="WrapperPrincipal">

  <h id="Header">
    <ul id="MenuWrapper">
      <li id="Item-L">Login</li>
      <li id="Item-R">Register</li>
      <li id="Item-D">Download</li>
    </ul>
  </h>

  <div id="Container">
  </div>
</div>

我希望项目首先显示，但它们位于ul内部，因此它们与整个列表同时出现（因为动画适用于ul）。

我如何制作这样的物品不会受到不透明度的影响？ - 或者有不同的级别。我尝试仅为物品类应用不同的不透明度但不起作用。

Fiddle.

Answer 1

我想我得到了你想要的东西，当container出现时你希望个人list-item一个接一个地展示。

ul li:nth-child(1){
    opacity:0;
    -webkit-transition:opacity 10s ease;
}
ul li:nth-child(2){
    opacity:0;
    -webkit-transition:opacity 20s ease;
}
ul li:nth-child(3){
    opacity:0;
    -webkit-transition:opacity 30s ease;
}
#Header:hover ul li:nth-child(1) {
    opacity: 0.7;
    }

#Header:hover ul li:nth-child(2) {
    opacity: 0.7;
    }
#Header:hover ul li:nth-child(3) {
    opacity: 0.7;
    }

Fiddle example

列出项目转换

1 个答案: