Javascript Chrome&；上的菜单淡入仍处于悬停状态；游猎

我正在开发一个新的Joomla 2.5网站，我必须在菜单上实现一个淡入淡出效果，只适用于第一级li

网站网址：

我添加了这个效果，但我只在“谷歌浏览器”和“Safari”上有一个问题。当我将鼠标悬停在子菜单上并将鼠标移开，但不悬停父菜单时，淡入淡出效果仍然存在，但当我将鼠标移开且最后一个悬停的项目是父项时，淡入淡出效果正确执行

以下是我的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);

（函数（$）{
$（文档）.ready（函数（）{
$（'ja mainnav ul.level0 li'）。不是（'ja mainnav ul.level0 li'）。附加（''）；
$（'ja mainnav ul.level0 li'）。不是（'ja mainnav ul.level0 li'）。悬停(
函数（）{
$（this.children（'div'）.stop（true，true.fadeIn（'1000'）；
},
函数（）{
$（this.children（'div'）。stop（true，true）。fadeOut（'fast'）；
})。单击（函数（）{
$（this.addClass（'selected'）；
});
});
})（jQuery）；

请建议在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+ */