帶通配符選擇器/事件冒泡的嵌套元素

Question

我想綁定到一個元素並在它上面添加一個大綱。問題是，當我將鼠標懸停在嵌套元素上時，父元素也被選中。

當我將鼠標懸停在「5深度」上時，我應該只在該跨度上有一個邊框，而不是所有的父母。

http://jsfiddle.net/7uQwr/

我怎樣才能避免這種情況？一種奇怪的用例，但我沒有控制這裏的標記:)

Answer 1

這是因爲event冒泡，直到body元素。使用event.stopPropagation()停止事件傳播，那麼它只會限制觸發事件的元素。

工作demo

Answer 2

<span id="1"> 
one deep 
<span id="2"> 
    two deep 
    <span id="3"> 
     Three deep 
     <span id="4"> 
      Four Deep 
      <span id="5"> 
       five deep 
      </span> 
     </span> 
    </span> 

$('#5').hover(function() { 
    $(this).css('outline', '2px solid red'); 
    }, 
     function() { 
     $(this).css('outline', 'none') 
    }); 

Answer 3

我不能讓這與hover工作。如果你從左到右混淆，反之亦然，它的行爲並不像我想要的那樣。相反，我做了這似乎很好的工作。

http://jsfiddle.net/7uQwr/6/

$('body *').mouseover(function(e) { 
    $(this).css('outline', '2px solid red'); 
    e.stopPropagation(); 
}); 

$('body *').mouseout(function(e) { 
    $('span').css('outline', 'none'); 
});