Mouseover/mouseout + :not jquery issue

Question

I am trying to make a simple content-sliding thingy and got stuck writing the code for probably the simplest stuff - handling hover for the navigation part of the slider. I want it to be so that when one of the divs with slide info has been clicked on, the hover doesn't work for it, but works for the other two divs.

I've tried classes and id's for the clicked div, but nothing works when I'm getting to the hover part. I'm trying to use :not filter to select the other two divs, or all three, the ones that have not been #clicked. But there isn't much selection going on - no matter what, hover works for all three divs. I've tried using :not with other functions, like hide(), and it works just fine. So is this a CSS specificity issue? Or is it something wrong with mouseover/mouseout? Or maybe with me, like being an incompetent fool?

Here's my 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 the jquery code:

// adds href="#" to all links in "linkswrapper" div
$("#linkswrapper div a").attr({href: "#"});

// this handles clicks on the divs. When clicked, the div is assigned 
// "clicked" id, and the id attribute is removed from the other sibling divs
$("#linkswrapper div").click(function() {
    $(this).attr({id:"clicked"});
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
});

// handling the mouseover/mouseout. Hover should be working on all the three divs 
// if neither of them has been clicked on or only on the two other divs if one 
// of the three 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");   
});

Answer 1

The events are assigned when the page loads and are assigned according to the current state of the elements as compared to the selector provided.

As such, the handler is assigned to all of them, because none of them have the #clicked ID yet. The handlers stay in placed unless you remove them.

One other approach would be to use .live() or .delegate(), so that the selectors are considered dynamically as the events occur.

Try it out: http://jsfiddle.net/neGgz/

$("#linkswrapper div:not(#clicked)").live('mouseover', function() {
    $("a", this).css("border-color","#0066FF");
    $("p", this).css("color","#0066FF");
}).live('mouseout', function(){
    $("a", this).css("border-color","#e3e3e3");
    $("p", this).css("color","#cccccc");   
});

• http://api.jquery.com/live/

Alternate approach:

• http://api.jquery.com/delegate/

---

EDIT:

Or you can use the hover event with .live():

Try it out: http://jsfiddle.net/neGgz/1/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) {
    if(e.type == 'mouseover') {
        $("a", this).css("border-color","#0066FF");
        $("p", this).css("color","#0066FF");
    } else {
        $("a", this).css("border-color","#e3e3e3");
        $("p", this).css("color","#cccccc");   
    }
});​

---

EDIT:

Or here's a nice short version using classes:

Try it out: http://jsfiddle.net/neGgz/2/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) {
    $("a,p", this).toggleClass('hovering');
});

Answer 2

Instead of .mouseover() and .mouseout() you'll want to use mouseneter and mouseleave with .delegate() here, like 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 is this selector: $("#linkswrapper div:not(#clicked)") finds all <div> in #linkswrapper that aren't id="clicked" at that time, if the ID comes and goes later, that doesn't affect the fact that the mouse events were already bound to the element (not the selector) earlier. Using .delegate() listens for the event to bubble and checks the selector when the event happens, so it'll differentiate if the element currently has the ID or not.

The mouseover to mouseenter and mouseout to mouseleave changes are because the former events will happen when entering/leaving a child as well, which you usually don't want.

---

As a side note, this can be simpler as well, no need for the .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 a demo here :)