延遲：懸停在CSS3中？

有沒有辦法延遲：懸停事件，而不使用JavaScript？我知道有一種延遲動畫的方法，但我沒有看到任何延遲：懸停事件。延遲：懸停在CSS3中？

編輯...

對不起，我應該包括在此開始與...我建立一個兒子的，像口魚菜單。我想模擬hoverIntent的功能，但不添加額外的JS權重。我寧願把它看作是一種漸進式的增強，而不是讓JS成爲使用菜單的必要條件。

更新

下面是最終代碼... http://jsfiddle.net/aEgV3/

感謝所有幫助！

來源

2011-12-19 Adam Youngers

有趣的問題，但我認爲'沒有;不幸的是，不是沒有JavaScript'很可能是答案。 – 2011-12-19 19:05:01

107

嗯..你可以使用轉換，如果效果是基於CSS耽誤你想要的效果:hover ..

例如

div{ 
    transition: 0s background-color; 
} 

div:hover{ 
    background-color:red;  
    transition-delay:1s; 
}

這將延遲應用的懸停效果（background-color在這種情況下爲）一秒鐘。在兩個

演示延遲的懸停和關閉在延遲的僅上懸停http://dabblet.com/gist/1498443

演示上在http://dabblet.com/gist/1498446

Vendor Specific Extentions for Transitions和W3C CSS3 transitions

來源

2011-12-19 19:12:13

您可能需要將瀏覽器前綴添加到您的答案以確保完整性。 – ThinkingStiff 2011-12-19 19:22:29

@ThinkingStiff，好點..添加了對MDN的參考 – 2011-12-19 20:07:19

我更新了我的問題......我不確定一個過渡是否適用於我的案例。我有子菜單位於屏幕上，並在懸停時放回原位。 – 2011-12-19 23:43:26

對於更美觀:)可以是：

left:-9999em; 
top:-9999em;

爲.sNv2 .nav UL位置可以通過z-index:-1和z-index:1爲.sNv2 .nav LI:Hover UL

來源

2014-03-20 13:34:44

div { 
    background: #dbdbdb; 
    -webkit-transition: .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; 
} 

div:hover { 
    background:#5AC900; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
}

更換這將添加一個過渡延遲，這將適用於幾乎所有的瀏覽器..

來源

2016-09-28 06:03:04

延遲：懸停在CSS3中？

回答

相關問題