Mouseover/mouseout + :not jquery issue -

i trying make simple content-sliding thingy , got stuck writing code simplest stuff - handling hover navigation part of slider. want when 1 of divs slide info has been clicked on, hover doesn't work it, works other 2 divs.

i've tried classes , id's clicked div, nothing works when i'm getting hover part. i'm trying use :not filter select other 2 divs, or three, ones have not been #clicked. there isn't selection going on - no matter what, hover works 3 divs. i've tried using :not other functions, hide(), , works fine. css specificity issue? or wrong mouseover/mouseout? or maybe me, being incompetent fool?

here's html:

<div id="linkswrapper">   <div>     <a>slide 1</a>     <p>slide info 1.</p>   </div>   <div>     <a>slide 2</a><p>slide info 2.</p>   </div>   <div>     <a>slide 3</a>     <p>slide 3 info.</p>   </div> </div> 

here's jquery code:

// adds href="#" links in "linkswrapper" div $("#linkswrapper div a").attr({href: "#"});  // handles clicks on divs. when clicked, div assigned  // "clicked" id, , id attribute removed other sibling divs $("#linkswrapper div").click(function() {     $(this).attr({id:"clicked"});     $("#linkswrapper div").not(this).each(function(){ $(this).removeattr("id"); });  });  // handling mouseover/mouseout. hover should working on 3 divs  // if neither of them has been clicked on or on 2 other divs if 1  // of 3 has been clicked on $("#linkswrapper div:not(#clicked)").mouseover(function() {     $("a", this).css("border-color","#0066ff");     $("p", this).css("color","#0066ff"); }).mouseout(function(){     $("a", this).css("border-color","#e3e3e3");     $("p", this).css("color","#cccccc");    }); 

instead of .mouseover() , .mouseout() you'll want use mouseneter , mouseleave .delegate() here, this:

$("#linkswrapper").delegate("div:not(#clicked)", "mouseenter", function() {     $("a", this).css("border-color","#0066ff");     $("p", this).css("color","#0066ff"); }).delegate("div:not(#clicked)", "mouseleave", function(){     $("a", this).css("border-color","#e3e3e3");     $("p", this).css("color","#cccccc");    }); 

then problem selector: $("#linkswrapper div:not(#clicked)") finds <div> in #linkswrapper aren't id="clicked" at time, if id comes , goes later, doesn't affect fact mouse events bound to element (not selector) earlier. using .delegate() listens event bubble , checks selector when event happens, it'll differentiate if element currently has id or not.

the mouseover mouseenter , mouseout mouseleave changes because former events happen when entering/leaving child well, usually don't want.

---

as side note, can simpler well, no need .each():

$("#linkswrapper div").click(function() {   $(this).attr({id:"clicked"});   $("#linkswrapper div").not(this).each(function(){ $(this).removeattr("id"); });  }); 

like this:

$("#linkswrapper div").click(function() {   $(this).attr({id:"clicked"});   $("#linkswrapper div").not(this).removeattr("id");  }); 

you can try both improvements in demo here :)