延遲2秒

行，所以我已經創建了一個顯示在盤旋在它的菜單按鈕的CSS過渡。只要鼠標移離按鈕，菜單就會隱藏起來。這是完美的，但是當我將鼠標移動到菜單本身時，菜單不應該消失。這也正在發生，但我創建了一個反彈效果使用CSS來使它更時尚，如果我嘗試在動畫發生之前將鼠標懸停在菜單上，菜單會再次隱藏，因爲菜單之間的差距和按鈕，所以我想延遲隱藏2秒，這樣即使有人按了按鈕並嘗試移動菜單，它也應該至少等待2秒，然後才能消失。 Link to fiddle 延遲2秒

HTML代碼

<div id="menu"> 
      <ul class="menu" id="tempMenu"> 
    <li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div> 
         <ul class="submenu"> 
          <li> 
           <a id="one" href="">one</a> 
          </li> 
          <li> 
           <a id="two" href="">two</a> 
          </li> 
          <li> 
           <a id="three" href="">three</a> 
          </li> 
          <li> 
           <a id="four" href="">four</a> 
          </li> 
          <li> 
           <a id="five" href="">five</a> 
          </li> 
          <li> 
           <a id="six" href="">six</a> 
          </li> 
          <li> 
           <a id="seven" href="">seven</a> 
          </li> 
          <li> 
           <a id="eight" href="">eight</a> 
          </li> 
         </ul> 
        </div> 
       </li> 
    </ul> 
</div>

CSS代碼：

ul.menu .listOfNumbers{ 
    position: fixed; 
    margin-left: 20px; 
    list-style-type: none; 
    margin: 15px 0; 
    float: left; 
    height: 30px; 
    line-height: 30px; 

} 
ul.menu .listOfNumbers a{ 
    position: fixed; 
    margin-left: 93px; 
    background: #666 -webkit-gradient(linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80))); 
    background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%); 
    background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */ 
    display: block; 
    padding: 0; 
    text-decoration: none; 
    color: #fff; 
    font-size: 12px; 
    font-weight: bolder; 
    text-shadow: #000 0 -1px 1px; 
    width: 90px; 
    text-align: center; 
    border-bottom: 1px solid #000; 
    border-top: 1px solid #666; 
    border-left: 1px solid #666; 
    border-right: 1px solid #000; 
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out; 
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out; 
    -moz-box-shadow: white 7px 5px 20px; 
    -webkit-box-shadow:white 7px 5px 20px; 
    box-shadow: white 7px 5px 20px; 
} 
ul.menu .submenu{ 
    display: none; 
    top: -30px; 
    position: absolute; 
    opacity: 0; 
} 
ul.menu .submenu li{ 
    list-style-type: none; 
} 
ul.menu li:hover .submenu{ 

    display: block; 
    top: -2px; 
    opacity: 1; 
    animation:mymove 1.2s linear; 
    -moz-animation:mymove 1.2s linear; /* Firefox */ 
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */ 
    -o-animation:mymove 1.2s linear; /* Opera */ 
    -ms-animation:mymove 1.2s linear; /* IE */ 
} 
@keyframes mymove 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-moz-keyframes mymove /* Firefox */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-o-keyframes mymove /* Opera */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-ms-keyframes mymove /* IE */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

ul.menu .submenu li:first-child a{ 
    -webkit-border-top-left-radius:10px; 
    -webkit-border-bottom-left-radius:2px; 
    -webkit-border-top-right-radius:10px; 
    -webkit-border-bottom-right-radius:2px; 
    -moz-border-top-left-radius: 10px; 
    -moz-border-radius-bottomleft:2px;  
    -moz-border-top-right-radius: 10px; 
    -moz-border-radius-bottomright: 2px; 
    border-top-left-radius: 10px; 
    border-bottom-left-radius:2px;  
    border-top-right-radius: 10px; 
    border-bottom-right-radius:2px; 
    margin: 34px 95px; 
    z-index: 1000; 


} 
ul.menu .submenu li:last-child a{ 
    -webkit-border-top-left-radius:2px; 
    -webkit-border-bottom-left-radius:10px; 
    -moz-border-top-left-radius: 2px; 
    -moz-border-radius-bottomleft:10px; 
    -webkit-border-top-right-radius:2px; 
    -webkit-border-bottom-right-radius:10px; 
    -moz-border-top-right-radius: 2px; 
    -moz-border-radius-bottomright: 10px; 
    border-top-left-radius: 2px; 
    border-bottom-left-radius:10px;  
    border-top-right-radius: 2px; 
    border-bottom-right-radius:10px; 
    margin:260px 95px; 
    z-index: 1000; 

} 

ul.menu .submenu li:nth-of-type(2) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    margin: 68px 95px; 
    z-index: 1000; 

} 
ul.menu .submenu li:nth-of-type(3) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    margin: 100px 95px; 
    z-index: 1000; 

} 
ul.menu .submenu li:nth-of-type(4) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    margin: 133px 95px; 
    z-index: 1000; 

} 
ul.menu .submenu li:nth-of-type(5) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    margin: 165px 95px; 
    z-index: 1000; 

} 
ul.menu .submenu li:nth-of-type(6) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    margin: 197px 95px; 
    z-index: 1000; 

} 

ul.menu .submenu li:nth-of-type(7) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    margin: 229px 95px; 
    z-index: 1000; 

}

我不知道是否有必要涉及JavaScript或jQuery的。但是，如果使用它們中的任何一個都可以實現，那麼它也沒問題。

來源

2012-12-30 Nick Div

我覺得你的子菜單的頂部應爲重疊的一些像素的主菜單按鈕（這是完成anmimation的情況下）。此外，你應該表現出（'顯示：block'）的動畫的子菜單包裝（說父'div' ul.submenu'的'），做動畫（上說'ul.submenu'）無論知名度。所以包裝將不會被隱藏，因爲您將鼠標移出「敏感」區域。 –

@ try-catch-finally是的，這聽起來像個好主意。謝謝。 –

動畫應該啓動：當然懸停（但獨立於包裝可見性）。 –

也許你想transition-delay：https://developer.mozilla.org/en-US/docs/CSS/transition-delay

編輯：

可以指定多個延遲;每個延遲都將應用到由transition-property屬性指定的相應屬性，該屬性充當主列表。如果指定的延遲少於主列表中的延遲，則將缺失值設置爲初始值（0s）。如果有更多的延遲，這個列表將被簡化爲正確的大小。在這兩種情況下，CSS聲明都保持有效。

來源

2012-12-30 09:34:26 phenomnomnominal

，但不會延緩外觀，反彈和不透明度。整個功能將會失靈。但感謝幫助。 Upvoted。 –

我的編輯也許能幫上忙。 – phenomnomnominal

我明白了你的意思，我也試過了，但它似乎並沒有出於某種原因，我不知道我做錯了什麼，你能不能請它做。 –

-1

看看這個W3School explaination

它說，你可以指定你想要的，有多個過渡，還有更多的事情可以做CSS3的任何時間的過渡。通過教程，它會幫助你很多。

來源

2012-12-30 09:56:28

[請不要鏈接到w3schools.com ...]（http://w3fools.com/） – phenomnomnominal

的jsfiddle http://jsfiddle.net/sP5hg/6/

ul.menu .listOfNumbers{ 
    position: relative; 
    margin-left: 20px; 
    list-style-type: none; 
    margin: 15px 0; 
    float: left; 
    line-height: 30px; 
    z-index: 1000; 
} 
ul.menu .listOfNumbers a{ 
    margin-left: 93px; 
    background: #666 -webkit-gradient(linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80))); 
    background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%); 
    background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */ 
    display: block; 
    padding: 0; 
    text-decoration: none; 
    color: #fff; 
    font-size: 12px; 
    font-weight: bolder; 
    text-shadow: #000 0 -1px 1px; 
    width: 90px; 
    text-align: center; 
    border-bottom: 1px solid #000; 
    border-top: 1px solid #666; 
    border-left: 1px solid #666; 
    border-right: 1px solid #000; 
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out; 
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out; 
    -moz-box-shadow: white 7px 5px 20px; 
    -webkit-box-shadow:white 7px 5px 20px; 
    box-shadow: white 7px 5px 20px; 
} 
ul.menu .submenu{ 
    display: none; 
    top: -30px; 
    position: absolute; 
    /*opacity: 0;*/ 
} 
ul.menu .submenu li{ 
    list-style-type: none; 
} 

ul.menu li:hover .submenu{ 

    display: block; 
    top: -2px; 
    /*opacity: 1;*/ 
    animation:mymove 1.2s linear; 
    -moz-animation:mymove 1.2s linear; /* Firefox */ 
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */ 
    -o-animation:mymove 1.2s linear; /* Opera */ 
    -ms-animation:mymove 1.2s linear; /* IE */ 
} 
@keyframes mymove 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-moz-keyframes mymove /* Firefox */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-o-keyframes mymove /* Opera */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

@-ms-keyframes mymove /* IE */ 
{ 
0% {top:-10px;opacity:0.1;} 
10% {top:3px;opacity:0.3;} 
30% {top:40px;opacity:0.4;} 
60% {top:-5px;opacity:0.5;} 
80% {top:20px;opacity:0.7;} 
90% {top:10px;opacity:0.9;} 
95% {top:5px;opacity:0.95;} 
100% {top:3px;opacity:1;} 
} 

ul.menu .submenu li:first-child a{ 
    -webkit-border-top-left-radius:10px; 
    -webkit-border-bottom-left-radius:2px; 
    -webkit-border-top-right-radius:10px; 
    -webkit-border-bottom-right-radius:2px; 
    -moz-border-top-left-radius: 10px; 
    -moz-border-radius-bottomleft:2px;  
    -moz-border-top-right-radius: 10px; 
    -moz-border-radius-bottomright: 2px; 
    border-top-left-radius: 10px; 
    border-bottom-left-radius:2px;  
    border-top-right-radius: 10px; 
    border-bottom-right-radius:2px; 
    margin: 35px 93px 0; 


} 
ul.menu .submenu li:last-child a{ 
    -webkit-border-top-left-radius:2px; 
    -webkit-border-bottom-left-radius:10px; 
    -moz-border-top-left-radius: 2px; 
    -moz-border-radius-bottomleft:10px; 
    -webkit-border-top-right-radius:2px; 
    -webkit-border-bottom-right-radius:10px; 
    -moz-border-top-right-radius: 2px; 
    -moz-border-radius-bottomright: 10px; 
    border-top-left-radius: 2px; 
    border-bottom-left-radius:10px;  
    border-top-right-radius: 2px; 
    border-bottom-right-radius:10px; 

} 

ul.menu .submenu li:nth-of-type(2) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
} 
ul.menu .submenu li:nth-of-type(3) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 

} 
ul.menu .submenu li:nth-of-type(4) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 

} 
ul.menu .submenu li:nth-of-type(5) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 

} 
ul.menu .submenu li:nth-of-type(6) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 

} 

ul.menu .submenu li:nth-of-type(7) a{ 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius: 0px; 
    -moz-border-radius-bottomleft:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 

}

主要CSS變化：

變化李的位置相對並刪除其孩子的位置固定，使李的尺寸將包括所有的孩子;這一步至關重要，因爲它會使li：hover始終工作，即使鼠標可以移出鏈接「Numbers」;
對李，而不是在子菜單適用的z-index，這恐怕應該是更合理的，因爲我們希望整個菜單應該是在頂部前方;

來源

2012-12-30 12:55:39 tristan

非常感謝，但是我在排中有很多菜單，我知道我沒有將它張貼在我自己的小提琴中或問題，但我不能增加div寬度並在那裏應用o = hover事件。我唯一的選擇是延遲隱藏事件3-4秒。但我感謝你的幫助.. Upvoted .. –

回答

相關問題