Fading out everything but (this) - while honoring a click()

Question

I'm trying to achieve a fading navigation system, where everything in the nav but the element being hovered will fade out to say, 0.3 opacity.

At the same time, I want clicks to have a greater "value", so as to not fade out a clicked element (or in this case, the active subpage).. That didn't make much sense to me either, I'll just post the code I have.

    <nav id="main">
        <ul>
            <li>
                <a>work</a>
            </li>
            <li>
                <a>about me</a>
            </li>
            <li>
                <a>contact</a>
            </li>           
        </ul>
    </nav>

And the script that makes it sparkle:

var nava = "nav#main ul li a";

$(nava).hover(function(){
    $(nava).not(this).removeClass().addClass("inactive");
    $(this).addClass("active");
});

$(nava).click(function(){
    $(this).removeClass().addClass("active");
});

});

And the classes / css(less):

.inactive{color:@color2; border-bottom:0 solid #000;}

.active{color:@color1; border-bottom:1px solid #000;}

nav#main ul li a{color:@color1;}

Basically the hover states take priority over the click, which I do not want to happen.

Ideally I'd like for all of the anchor elements to revert to its original state whenever you hover out from the unordered list holding it all. If anyone has some pointers on this it'd be greatly appreciated. Cheers!

Edit: In response to Christian Varga - I get your point, but what I'm trying to do is the following.

Default State: Opacity 1

Hovered State: Opacity 0.3 (on everything BUT the hovered element, the hovered element is still at Opacity 1)

Clicked(Active) State: Opacity 1 (With the other links not overriding said opacity on the clicked element).

Mouseout(From Container): Opacity 1 on everything, unless a link has been clicked(is active).

I hope that makes it a little bit clearer, apologies for the original explanation.

score 0 · Answer 1 · answered Jun 19 '12 at 03:13

0

Why are you binding the hovers with jQuery? That's what CSS is for :). Try something like this instead:

js:

var nava = 'nav#main ul li a';

$(nava).click(function() {
    $(nava).removeClass('active')
    $(this).addClass('active');
});

css:

nav#main ul li a{color:#00ff00;}
nav#main ul li a:hover{color:#00ff00; border-bottom:1px solid #000;}
nav#main ul li a.active{color:#ff0000; border-bottom:0 solid #000;}

jsFiddle: http://jsfiddle.net/Z2KMB/

And a jsFiddle with opacity changes: http://jsfiddle.net/Z2KMB/1/

answered Jun 19 '12 at 03:13

Christian

19,605
3
54
70

The only real problem I have with this (this, being the jsFiddle with opacity changes) is that it's "default" state, is with an opacity of 0.3. Basically I'd like it to be: Default - 1 opacity Hover - 0.3 opacity (Except the element being hovered) Click - 1 Opacity Mouseout from container - 1 opacity So I pretty much know what I want (dont we all), I just dont know how to translate it into working jquery code. – Jun 19 '12 at 03:42
That comment didnt come out the way I intended it to, apologies. I'll edit the mainpost to make it clearer. – Jun 19 '12 at 03:43

score 0 · Answer 2 · answered Jun 19 '12 at 03:15

Use mouseout and mouseover and then specify what you want to happen in your case setting the class of the items you want.

Example:

$("div.class").mouseout(function(){
      $("#control_name").removeClass("class_name");
    }).mouseover(function(){
      $("#control_name").addClass("other_class_name");
    });

Obviously you know how to name based on id's class names and type's etc.. The above is just an example.

Fading out everything but (this) - while honoring a click()

2 Answers2