2

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

网址：http: //goo.gl/Eu9Mt

我添加了此效果，但仅在“Google Chrome”和“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);

请指教

4

1 回答 1

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 支持

希望这可以帮助

于 2012-12-05T09:30:06.567 回答