Jquery Mouseenter Click to Remove Class Not Working
- by Sundance.101
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.
