How to change link color when hovering or clicking lavalamp jquery menu?

Question

I am using LavaLamp script for my horizontal menu

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Active or hovered link is now grey. I want to change color on hover (or clicked) menu item, to look like this:

http://screencast.com/t/WU02S3jF

HTML:

   `<ul class="lavaLamp">
        <li><a href="#">Home</a></li>
        <li><a href="#">Plant a tree</a></li>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Ride an elephant</a></li>
    </ul>`

Javascript:

(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) {
            $back.each(function () {
                $(this).dequeue();
            }
        ).animate({
            width: el.offsetWidth,
            left: el.offsetLeft
        }, o.speed, o.fx);
        };
    });
};})(jQuery);

Answer 1

I think the only thing you need to do is change the css background-color:

.lavaLampNoImage li.back {
    border: 1px solid #000;
    background-color: blue; // change this line to the correct color
    width: 9px;
    height: 30px;
    z-index: 8;
    position: absolute;
}

Answer 2

Add the following to your css CSS:

.lavaLamp li a:hover {
    color: white;
    background: lightblue;
    //anything else you want to add here
}

in addition if you want it also to change upon select you should create a class that is added to the link's li element when it is selected and removed when another is selected. for example the abc class would be added to the selected link li element:

.abc a {
    color: white;
    background: lightblue;
    //anything else you want to add here
}