jquery - how to select element and all children, except specific child

Question

I have a .mouseover() event triggered on all elements of class 'node'. It works fine, and is also triggered when user hovers over any child of .node. This works well for me, however, I do not want this event triggered if the user mouse overs a specific child, namely, an image.

Why is the selector $('.node :not(img)') not working?

Oddly enough, it does work when I try it out at 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 failed 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 the event is "bubbling" up to the parents which triggers the mouse over. You need to add a mouseover to the img to stop this.

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

Answer 2

in the callback function of bind, 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();
    }

});