jQuery Lava-Lamp Hover (CSS)

Question

I have the lava-lamp navigation basically working, but I have a small issue.

I'm using this LavaLamp menu plugin and am trying to get my navigation to look like this:

enter image description here

So I have it working, except the issue I'm having is that I need the links to be one color (black) when the lava-lamp image isn't over them, and white when it is. Hover works fine for that, but the issue comes with class current (the lava-lamp hover effect is on class current by default).

If I set the link to white for class current, the link stays white even when you hover over a different navigation link.

I assume some simple JavaScript could fix this, but I'm not that knowledgeable in it and would appreciate if anyone could share the solution with me.

[JSFiddle](http://jsfiddle.net/DRPsA) I'm not sure how to add images, but you should understand from this. When you hover over other links, they turn white (as they are supposed to) but I need HOME to change from white while another link is being hovered over and then change back to white while none are. — Dustin Perolio, Aug 14 '12 at 05:44

adeneo · Accepted Answer · 2012-08-14T06:20:29.297

Just rewrite the plugin to add colors ?

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

call plugin with colors

$(document).ready(function() {

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

});

FIDDLE

Added color animation (requires the easing plugin / jQuery UI) - FIDDLE

Probably better solution than mine. I was to lazy to look into the plugin. You should change the color via animation to look better. — Christoph, Aug 14 '12 at 06:07
This looks great, but a small issue. I know I said black and white to keep things simple, but I actually want the non-hover (i.e. black) text to also have a text-shadow (text-shadow: 1px 1px #FF9C1B;) and remove it on hover/current. Can you add that in for me? :p Thanks! Looks great. — Dustin Perolio, Aug 14 '12 at 06:20
@DustinPerolio - maybe something like this [FIDDLE](http://jsfiddle.net/bnVKW/2/)... — adeneo, Aug 14 '12 at 06:33

score 0 · Answer 2 · answered Aug 14 '12 at 05:28

0

set your color with !important like this

color:black !important;

may be this will help you out

answered Aug 14 '12 at 05:28

rahul

7,573
7
39
53

1

`!important` should almost *never* be used. – Blender Aug 14 '12 at 05:29
@Blender...and because why...? – Ryan Aug 14 '12 at 05:31
I don't think that will help unless I'm misunderstanding. For example, let's say the user is currently on page "CONNECT" so the text is white and the lava image is there as in the picture above. Now when the user hovers to VOTE for example, the VOTE link text turns white, but CONNECT also remains white. What I need is for CONNECT (current) to go to black when the user hovers over another link (VOTE) but if the user stops hovering on any link, CONNECT goes back to white (since the lava will return to CONNECT, as it is current). – Dustin Perolio Aug 14 '12 at 05:31
@RPM: You are overriding the specificity of selectors in a non-optimal way. More-specific selectors should be overridden by even more specific selectors, not with `!important`. – Blender Aug 14 '12 at 05:45
@RPM using `!important` proves either: 1) you did not understand cascading 2) you did not understand specificity 3) your stylesheets are a mess and you should refactor ... or possibly all of those. – Christoph Aug 14 '12 at 05:51
I find !important mainly useful when overriding browser defaults or when you want to overwrite JavaScript overwriting your CSS where you don't want it to in some cases. – Dustin Perolio Aug 14 '12 at 05:52
@Dustin Browser defaults don't need to be overridden with `!important` – Christoph Aug 14 '12 at 05:56
@Christoph Maybe not, I'm certainly no expert, just a beginner. I do know Google, Yahoo, and Amazon all use !important quite a bit though, so I don't think it's too much of a sin to use it. I don't think I've ever seen a major website not incorporating !important. – Dustin Perolio Aug 14 '12 at 06:02
@Dustin well, that's more a point of lazyness, because refactoring such huge applications like amazon is a hell. If you start with your small site using `!important` I promise, you will have nightmares when starting with a big one. It's a matter of good coding practice. Also, the "big" ones don't always are a good role model. Bootstrap misuses several elements, like `i` for icon. Is this a good practice? Certainly not... – Christoph Aug 14 '12 at 06:15
@Christoph Thanks for the information and the solution. I will try to limit my use of !important. :) – Dustin Perolio Aug 14 '12 at 06:22

score 0 · Answer 3 · answered Aug 14 '12 at 06:07

See updated fiddle: http://jsfiddle.net/DRPsA/5/

Basically, you can just add this:

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

    $(".lavaLampWithImage").hover(function() {    
          $(this).find(".current").removeClass("current");                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  } , 
        function() {    
          $(this).find(".theCurrentLink").addClass("current");                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        } 
);

breaks when hovering the li (try to hover only the bottom part of the navigation) — Christoph, Aug 14 '12 at 06:10

jQuery Lava-Lamp Hover (CSS)

3 Answers3