我想在css中應用延遲鼠標輸出

我想在鼠標移出事件開始CSS轉換之前應用延遲。我的CSS代碼如下，請讓我知道如何在CSS過渡之前應用時間延遲。我想在css中應用延遲鼠標輸出

我想要在用戶將鼠標指針移出菜單之後，菜單保持穩定一段時間（例如3秒）。

.timnav li .dropdown { 
    width: auto; 
    min-width: 0px; 
    max-width: 230px; 
    height: 0; 
    position: absolute; 
    overflow: hidden; 
    z-index: 999; 
    background:rgba(255, 255, 255, 0.8); 
    } 

.timnav li:hover .dropdown { 
    min-height: 60px; 
    max-height: 500px; 
    height: auto; 
    width: 100%; 
    padding: 0; 
      -webkit-transition: delay .5s ease-in-out; 
     -moz-transition: delay .5s ease-in-out; 
     -o-transition: delay .5s ease-in-out; 
} 

.timnav li .dropdown ul { 
    margin: 0; 
    margin-top:7px; 


} 

.timnav li .dropdown ul > li { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 
    padding-bottom:2px; 
} 


    .timnav li .dropdown .dropdown2{ 
    display: none; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 
} 

    .timnav li .dropdown ul > li:hover .dropdown2{ 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 

} 

    .timnav li .dropdown .dropdown2:hover { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 


} 


    .timnav li .dropdown .dropdown2 li a { 
    display: block; 
    padding-left:7px !important; 
    height:6 !important; 
    padding-top:8px; 
    background: url(../images/nav-bg.jpg) repeat; color:#fff; 

} 


.timnav li .dropdown ul > li a { 
    display: block; 
    line-height: 26px; 
    height: 22px; 
    padding: 10px; 
    background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF; 

} 

.timnav ul .dropdown ul li:first-child a { 
    border-radius: 0; 
} 

.timnav li .dropdown li a:hover { 
    background: url(../images/nav-bg.jpg) repeat; color:#000; 
}

來源

2013-04-24 Tim John

您可以將延遲添加到轉換，語法如下：

transition: all 0.5s ease-in-out 3s;

所以

transition: <property> <duration> <timing-function> <delay>;

的語法是所有的前綴相同版本也。

我已經創建了一個這樣的演示，因爲您需要做一些有點棘手的事情，才能讓該項目毫不拖延地出現，但延遲之前就會出現延遲。

http://jsfiddle.net/pgqM2/

關鍵是要重新定義過渡到加3秒延遲時，有沒有懸停，但有一個0延遲時，有一個懸停：

li ul { 
    opacity: 0; 
    transition: all 0.5s ease 3s; 
} 

li:hover ul { 
    opacity: 1; 
    transition: all 0.5s ease 0s; 
}

來源

2013-04-24 22:26:40 Fenton

感謝但它不工作，你能告訴我我應該在哪裏嵌入webkit延遲，請檢查我的CSS鱈魚。你想要活的鏈接，然後我會發布在這裏。 – 2013-04-24 22:45:36

我已經添加了一個簡單的JSFiddle演示的鏈接。所有前綴的語法都是相同的，無論是「-o」還是「-webkit」等。 – Fenton 2013-04-24 22:52:55

感謝史蒂夫芬頓，它的工作，但沒有追加整體，下拉快速隱藏。和在鼠標上的下拉菜單上切到peice。不顯示整體。如果你能幫助我，我會發給你網站的網址。 – 2013-04-24 23:22:15

CSS中有transition-delay屬性。只需將其添加到您的代碼中，即可獲得所需的效果。

transition-delay:3s;

速記過渡性的目的，這裏是一個圖片，總結起來

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

因此，在你的情況應該是這樣的

div:hover { 
 
    -webkit-transition: .5s ease-in-out 3s; 
 
    -moz-transition: .5s ease-in-out 3s; 
 
    -o-transition: .5s ease-in-out 3s; 
 
    transition: .5s ease-in-out 3s; 
 
    color: red; 
 
    cursor: pointer; 
 
}

<div>Hover me. There is a delay!</div>

這裏是一個fiddle證明

來源

2013-04-24 22:24:45

謝謝，但它不工作，你能告訴我我應該在哪裏嵌入webkit延遲，請檢查我的CSS鱈魚。你想要活的鏈接，然後我會發布在這裏。 – 2013-04-24 22:44:59

@TimJohn什麼不工作？ – 2013-04-25 02:13:58

請確保也使用前綴版本（這也增加了IE支持）。（並且請注意，Chrome 26，Firefox 16和Opera 12.1都沒有前綴'transition'，所以至少'-moz-'可能不需要更長的時間。） – Ryan 2013-04-25 03:16:53

你可以使用css3屬性transition-delay來延遲執行css。點擊「嘗試自己」看一個例子。

來源

2013-04-24 22:26:40 AndrewHipp

謝謝，但它不工作，你能告訴我應該在哪裏嵌入webkit延遲，請檢查我的CSS鱈魚。你想要活的鏈接，然後我會發布在這裏。 – 2013-04-24 22:45:56

當你使用display none時你不能使用css轉換，只有顯示none的解決方案是js。

來源

2014-10-23 14:31:23

我想在css中應用延遲鼠標輸出

回答

相關問題