2010-07-09 118 views
4

我有一个.mouseover()事件触发类节点的所有元素。它工作正常,并且在用户悬停在.node的任何子节点时也会触发。这对我来说很好,但是,如果用户鼠标移过特定的子项,即图像,我不希望触发此事件。jquery - 如何选择元素和所有的孩子,除了特定的孩子

为什么选择器$('。node:not(img)') not working?

奇怪的是,当我在http://www.woods.iki.fi/interactive-jquery-tester.html上尝试时,它确实有效,但在我的实际实现中并没有。

我的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> 

我的jQuery:

//start with third tier not visible 
    $('.nodeChildren').hide(); 

    $('.node :not(img)').mouseover(function(){ 
      $(this).children('div').show(); 
    }); 

    $('.node').mouseout(function() { 
      $('.nodeChildren').hide(); 
    }); 

});

我的失败是“冒泡”上升到了触发鼠标父母尝试

$('.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')) 

感谢所有帮助:)

回答

3

的问题是该事件。你需要添加一个mouseover到img来停止这个。

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

在bind的回调函数中,可以检查目标。在你的情况下,像这样的东西

$(".node").bind('mouseover',function(e){ 

    if(e.target.nodeName != 'IMG'){ 
     $(this).children('div').show(); 
    } 

}); 
相关问题