Chrome和Safari上的菜單仍保持懸停狀態

Question

我正在開發一個新的Joomla 2.5網站，並且我只能在第一級li的菜單上實施淡入淡出效果。

網站網址：http://goo.gl/Eu9Mt

我加了這個作用，但我有隻「谷歌瀏覽器」 &「野生動物園」的問題。當我將鼠標懸停在子菜單上並將鼠標移開但未將鼠標懸停在父菜單上時，淡入淡出效果仍然存在，但是當我將鼠標移開並且最後一個項目是父項時，淡入淡出效果將正確執行。

這裏是我的jQuery代碼：

(function($){ 
    $(document).ready(function() { 
    $('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').append('<div class=\'hover\'><div><\/div><\/div>'); 
    $('#ja-mainnav ul.level0 li').not('#ja-mainnav ul.level0 li ul li').hover(
     function() { 
      $(this).children('div').stop(true, true).fadeIn('1000'); 
     }, 
     function() { 
      $(this).children('div').stop(true, true).fadeOut('fast'); 
    }).click (function() { 
     $(this).addClass('selected'); 
    }); 
}); 
})(jQuery); 

請告知

Answer 1

添加這對你的CSS：

#ja-mainnav li.haschild .hover { 
    background-image: none; 
} 

#ja-mainnav li.haschild-over.over .hover { 
    background-image: url("../../images/nav/menu_over.gif"); 
} 

#ja-mainnav li.haschild .hover div { 
    background-image: none; 
} 

#ja-mainnav li.haschild-over .hover div { 
    background-image: url("../../images/nav/menu_overspan.gif"); 
} 

添加純CSS的過渡，可以應用此對懸浮階段（例如）：

-webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */ 
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ 
-o-transition: all 0.3s ease-out; /* Opera 10.5–12.00 */ 
transition: all 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */ 

沒有IE支持恐怕

希望這有助於