javascript - jQuery熔岩灯悬停(CSS)

我的熔岩灯导航基本正常，但是我有一个小问题。

我正在使用此LavaLamp menu plugin，并试图使导航看起来像这样：



所以我可以正常工作，除了我遇到的问题是，当熔岩灯图像不在上方时，我需要链接为一种颜色（黑色），而当链接在上方时，则需要白色。悬停效果很好，但是问题出在当前类上（默认情况下，熔岩灯悬停效果在当前类上）。

如果我将当前课程的链接设置为白色，则即使将鼠标悬停在其他导航链接上，该链接也会保持白色。

我认为可以使用一些简单的JavaScript来解决此问题，但是我对此并不了解，如果有人可以与我共享解决方案，我将不胜感激。

最佳答案

只是重写插件以添加颜色？

//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"
    });

});​

FIDDLE

添加了彩色动画（需要使用缓动插件/ jQuery UI）-FIDDLE

关于javascript - jQuery熔岩灯悬停(CSS)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11946200/