列出项目过渡

Question

我有一个标题，当悬停在悬停时将向下移动块（#container），打开菜单的空间，该菜单将慢慢出现在Hover上。

。

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内

我如何使其不受不透明度的影响？ - 或具有不同的水平。我尝试仅申请其他不透明度强度的项目，但无效。

小提琴。

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

小提琴示例