Jquery Mouseenter Click to Remove Class Not Working

Posted by Sundance.101 on Stack Overflow See other posts from Stack Overflow or by Sundance.101
Published on 2012-07-06T21:12:11Z Indexed on 2012/07/06 21:15 UTC
Read the original article Hit count: 208

Filed under:

I'm really hoping someone can help. I have an unordered list of anchors that fades in opacity (the css defaults it to 0.7) on on mouseenter, and out again on mouseleave.

On click, I want to add a class that makes the opacity stay at full. Got that far, but removing the class from the matched elements doesn't work at the moment - the other items that have had the class stay at full opacity, too.

Here is the Jquery:

            $(document).ready(function(){

        $("#nav a").mouseenter(function(){
        $(this).fadeTo("slow",1);
        $("#nav a").click(function(){
        $(".activeList").removeClass("activeList"); //THIS PART ISN'T WORKING   
        $(this).addClass("activeList"); 
        });
        });

        $("#nav a").mouseleave(function(){
        if (!$(this).hasClass("activeList"))    
        {
            $(this).fadeTo("fast",0.7); 
            }   
        });
        });

I think it's because I'm stuck in the element because of mouseenter and can only affect (this). Have tried .bind/.unbind, have tried the add/remove class on it's own (it worked) and a few other things, but no luck so far! Any suggestions would be greatly appreciated.

© Stack Overflow or respective owner

Related posts about jQuery