Jquery - how to select an element and all children except a specific child

Question

I have a .mouseover () event raised for all elements of the class 'node'. It works great and also works when the user hovers over any child .node element. This works well for me, however, I do not want this event to fire if the user mouse controls a specific child, namely the image.

Why doesn't the $ ('. Node: not (img)') selector work?

Oddly enough, it works when I try to execute it http://www.woods.iki.fi/interactive-jquery-tester.html , but not in my actual implementation.

My html:

<div id="container"> <div class="node" id="abc"> <h2>Node Title</h2> <div class="nodeChildren"> <h3 id="a1">Some text</h3> <h3 id="a2">Some text</h3> <h3 id="a3">Some text</h3> </div> <img src="diagonal-left.gif" /> </div> </div> 

My jquery:

  //start with third tier not visible $('.nodeChildren').hide(); $('.node :not(img)').mouseover(function(){ $(this).children('div').show(); }); $('.node').mouseout(function() { $('.nodeChildren').hide(); }); 

});

My unsuccessful attempts

 $('.node :not(img)') //no mouseover is triggered //for the following selectors, the mouseover event is still triggered on img $('.node').not('img') $('.node').not($('.node').children('img')) 

Thanks for any help :)

Answer 1

The problem is that the event "bubbles" to the parents, which causes the mouse. You need to add the mouse cursor to img to stop this.

 $(".node img").bind("mouseover", function(event) { event.stopPropagation(); }); 

Answer 2

in the bind callback function, you can check the target. in your case, something like this

 $(".node").bind('mouseover',function(e){ if(e.target.nodeName != 'IMG'){ $(this).children('div').show(); } });