2

私は新しい Joomla 2.5 Web サイトを開発しており、li の最初のレベルのみのメニューにフェード効果を実装する必要があります。

サイトURL： 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 に答える