CSS下拉菜單淡入轉變和顯示

-1

我一直在做我的功課，看來你不能使用你使用display:none;和display:inline;等的CSS過渡效果。CSS下拉菜單淡入轉變和顯示

我想添加淡入淡出到我的CSS下拉菜單，使其看起來更乾淨。使用我發現的顯示元素時，這是不可能的。

我嘗試從我的CSS中刪除display，但是當我這樣做時，元素在那裏（儘管不可見），並在您將鼠標懸停在其上時淡入。我讀了一個建議，添加「指針事件：無;」對此，這不是跨瀏覽器兼容的。如果您再次將鼠標移動到其上，它也會導致淡化元素閃爍。

我還使用了CSS關鍵幀動畫建議在使用顯示元素時淡入，但在鼠標離開時無法使其淡出。。:(

我知道這是可能的，因爲我已經看到了很多網站，但我不能得到正確的工作爲我

這裏是我的代碼：

http://pastebin.com/zVQapUNz

來源

2012-06-15 MattBoothDev

大多數網站使用jQuery或類似的JavaScript效果。某些效果只會在塊上起作用，您是否嘗試過內嵌塊？ – Ekim

我確實嘗試過，是......同樣的效果。導致轉換工作的唯一方法是完全從其中刪除顯示元素。但在這種情況下，菜單項只是不可見的，並且不能很好地隱藏。 – MattBoothDev

我寫你的代碼jsfiddle.net

http://jsfiddle.net/3PD7D/1/

這樣做的工作，當過我的鼠標移動噸，你可以使用相同的概念來改變不透明度

from {opacity:1;} 
to {opacity:0;}

隱藏菜單。但是，這會使其透明，任何背後的東西都將可見但不可點擊。我還沒有嘗試過如果將display：none添加到結束動畫幀中會發生什麼情況。

來源

2012-06-15 18:33:23 Ekim

jsfiddle！我正在尋找那個發佈我的代碼，但不記得名字。這是目前我在網站上的解決方案，但它不適用於IE9，也不會扭轉這些值導致淡出:( – MattBoothDev

，您可以在這裏看到：http://jsfiddle.net/kQ3J2 /扭轉它不會淡出...除非我做錯了嗎？（我是新來的動畫） – MattBoothDev

http://jsfiddle.net/kQ3J2/3/如果你添加{opacity：1;} 爲{opacity：0; visibility：hidden; display：none;}當隱藏它時，將下一組樣式添加到目標中，但問題是一旦用戶將鼠標懸停在菜單上，淡出就會開始。如果沒有使用jquery，不能想到一種方法來防止這種情況。 – Ekim

CSS下拉菜單淡入轉變和顯示

回答

相關問題