0

溶岩ランプのナビゲーションは基本的に機能していますが、小さな問題があります。

このLavaLamp メニュー プラグインを使用しており、ナビゲーションを次のようにしようとしています。

ここに画像の説明を入力

私が抱えている問題を除いて、溶岩ランプの画像が上にないときはリンクを1色(黒)にし、上にあるときは白にする必要があります。ホバーはそのために正常に機能しますが、問題はクラス電流に付属しています (溶岩ランプのホバー効果はデフォルトでクラス電流にあります)。

クラス最新のリンクを白に設定すると、別のナビゲーション リンクにカーソルを合わせても、リンクは白のままです。

簡単な JavaScript でこれを修正できると思いますが、私はそれほど知識がなく、誰かが私と解決策を共有できれば幸いです。

4

3 に答える 3

1

プラグインを書き直して色を追加するだけですか？

//lavalamp plugin
(function($) {
    $.fn.lavaLamp = function(o) {
        o = $.extend({
            fx: "linear",
            speed: 500,
            click: function() {}
        }, o || {});
        return this.each(function() {
            var me = $(this),
                noop = function() {},
                $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
                $li = $("li", this),
                curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
            $li.not(".back").hover(function() {
                move(this);
            }, noop);
            $(this).hover(noop, function() {
                move(curr);
            });
            $li.click(function(e) {
                setCurr(this);
                return o.click.apply(this, [e, this]);
            });
            setCurr(curr);

            function setCurr(el) {
                $back.css({
                    "left": el.offsetLeft + "px",
                    "width": el.offsetWidth + "px"
                });
                curr = el;
            };

            function move(el) {
                $(el).find('a')
                     .css('color', o.hover_color).end()
                     .siblings('li').find('a')
                     .css('color', o.color);
                $back.each(function() {
                    $(this).dequeue();
                }).animate({
                    width: el.offsetWidth,
                    left: el.offsetLeft
                }, o.speed, o.fx);
            };
        });
    };
})(jQuery);

色でプラグインを呼び出す

$(document).ready(function() {

    $(".lavaLamp").lavaLamp({
        fx: "backout",
        speed: 700,
        color: "#fff",
        hover_color: "#000"
    });

});​

フィドル

カラー アニメーションを追加 (イージング プラグイン / jQuery UI が必要) - FIDDLE

于 2012-08-14T06:04:03.277 に答える
0

更新されたフィドルを参照してください: http://jsfiddle.net/DRPsA/5/

基本的に、これを追加するだけです：

    $(".lavaLampWithImage .current").addClass("theCurrentLink");                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

    $(".lavaLampWithImage").hover(function() {    
          $(this).find(".current").removeClass("current");                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  } , 
        function() {    
          $(this).find(".theCurrentLink").addClass("current");                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        } 
);
于 2012-08-14T06:07:54.770 に答える
0

このように !important で色を設定します 

color:black !important;

これはあなたを助けるかもしれません

于 2012-08-14T05:28:18.910 に答える