如何在導航上添加懸停過渡效果？

我在問一個具體的問題，我不知道該怎麼做，但想加入到我的網站。如何在導航上添加懸停過渡效果？

1）當父李有一個孩子時，我希望該導航保持徘徊在應用效果時，通過子元素。現在，當我不再徘徊在它上面時，它將失去其懸停效果，並且當我希望父li在通過子導航時仍然具有懸停效果時，會對子元素應用懸停效果。

2）另外一個我不知道該怎麼做的事情是當我將鼠標懸停在任何導航鏈接上時的過渡效果，它會在進入和退出時有淡入淡出效果。我該怎麼做呢？

我試圖做到這一點：

CSS：

#nav li:hover > ul{ /*display sub menus when hovered over*/ 
    left:0; /*show menu when hovered*/ 
    z-index:100; /*places the sub nav in frontier of all elements*/ 
    transition: all 2.4s ease-in-out -2s; /*transition: property duration timing-function delay;*/ 
    -moz-transition: all 2.4s ease-in-out -2s; 
    -webkit-transition: all 2.4s ease-in-out -2s; 
}

它帶來育出的子菜單，滑動到右側的意外，但冷靜的結果。這不是我想要的，但沒關係。我只想要應用其他兩個功能，但不要在哪裏尋找。我的完整代碼在這裏：jsfiddle nav code

來源

2013-10-06 TheAmazingKnight

顯示DEMO Transition

#nav a:hover{ 
    transition: ease-in-out all .4s; 
    -moz-transition: ease-in-out all .4s; 
    -webkit-transition: ease-in-out all .4s; 
    background-color:#000000; 
    color:#FFFE41; 
    text-decoration:none; 
    font-weight:bold; 
}

來源

2013-10-06 02:28:20 aldanux

正是我想要的。謝謝！但我有個問題。我注意到你的轉換語法與我的定時功能之後的轉換屬性不同。順序是否在轉換時很重要，就像它會影響動畫的結果一樣嗎？ – TheAmazingKnight

歡迎您！是的..閱讀[這個問題在SO]（http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties），解決你所有的問題和更多的例子transitions-屬性，看看這個：[Using_CSS_transitions]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions）！祝你好運，享受它！ :) – aldanux

我編輯了你的代碼，將left屬性更改爲opacity並增加了一個transition。看看：http://jsfiddle.net/YfuDT/

關於你的問題的第1部分，我恐怕你不會用CSS來實現它，必須有一些JavaScript。

來源

2013-10-06 02:26:25

如何在導航上添加懸停過渡效果？

回答

相關問題