如何延遲鼠標移出元素的消失

我在我的頁面上獲得了一個li元素<li class="basket last items">。如果用戶將鼠標懸停在該li上，則會顯示另一個div，即<div class="articles">。我想延遲鼠標移出div的消失。如何延遲鼠標移出元素的消失

我現在的CSS規則：

#headlinks li.basket div.articles { 
    padding:5px; 
    width:380px; 
    z-index:100; 
    position:absolute; 
    border:1px solid #405ade; 
    -webkit-transition: display .5s all; 
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all; 
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all; 
    -ms-transition-delay: 5s; 
    -o-transition: .5s all; 
    -o-transition-delay: 5s; 
    transition: .5s all; 
    transition-delay: 5s; 
} 
#headlinks li.basket:hover div.articles { 
    z-index:1000; 
    display:block; 
    background-color:#fff; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    -transition-delay: 0s; 
}

我想與規則的鼠標移開應該由5秒鐘延遲，但它不工作。

編輯︰這是我的問題jsfiddle http://jsfiddle.net/21tn6bq6/我遺漏了不必要的CSS，但基本上這是我的問題。我希望div在鼠標移出後再逗留幾秒鐘。

來源

2015-06-08 Evo_x

的[延遲鼠標移開/懸停與CSS3過渡]可能重複（http://stackoverflow.com/questions/9393125/delay-mouseout-hover-with-css3-transitions） – isherwood

我讀該帖子，但你可以看到我試圖使用它，它不工作。這就是爲什麼我需要幫助。 –

您可能需要創建一個演示（這裏的代碼片段或http://jsfiddle.net）。「這不起作用」並沒有多大幫助。 – isherwood

display屬性不是「可設置的」，transitions不能使用它。您需要將其更改爲opacity或其他內容。而且您還需要更換transitions屬性以獲得所需的效果。

FIDDLE：https://jsfiddle.net/21tn6bq6/4/

來源

2015-06-08 15:33:11 lmgonzalves

我想你有你的延遲切換。您當前的CSS在鼠標懸停時顯示延遲，而不是鼠標懸停

來源

2015-06-08 15:10:35 Khan

因爲我想延遲mouseout而不是懸停，所以我得到了0延遲：我認爲它應該以這種方式工作。 –

如何延遲鼠標移出元素的消失

回答

相關問題