Question

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

我添加了此效果，但我在“Google Chrome”上遇到了问题。仅限“Safari”。当我将鼠标悬停在子菜单上并将鼠标移开但没有悬停在父菜单上时，淡入淡出效果仍然存在，但是当我将鼠标移开并且我悬停的最后一项是父项时，淡入淡出效果会正确执行。 / p>

这是我的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支持我害怕

希望这会有所帮助

Chrome和＆amp ;;中的菜单在悬停状态下仍然淡出苹果浏览器

1 个答案: