jQuery的懸停

Question

我有一個標準的HTML UL樹：

<ul id="catTree"> 
    <li>Header 1 <span>(blah)</span> 
     <ul> 
      <li>Branch 1 <span>(blah)</span></li> 
      <li>Branch2 <span>(blah)</span></li> 

... 和一些jQuery的：

$('#catTree li').hover(
     function() { 
      $(this).children('span').css('display','inline'); 
     }, 
     function() { 
      $(this).children('span').css('display','none'); 
     } 
    ); 

默認CSS隱藏的跨度，以及jQuery的顯示他們。它工作正常，除了和實際分支一樣，每個父母也顯示跨度。 等的懸停，它看起來像：

Header 1 (blah) 
    Branch1 (blah) 

而不是

Header1 
    Branch1 (blah) 

我知道爲什麼（因爲這兩個LIS都徘徊），但我怎麼能告訴jQuery來不火上的徘徊父母？

Answer 1

你可以使用：

//Note the selector. 
//Only the children li's will be selected 
$('#catTree ul > li').hover(
    function() { 
    $(this).children('span').css('display','inline'); 
    }, 
    function() { 
    $(this).children('span').css('display','none'); 
    } 
); 

Answer 2

也許如果你停止傳播：

$('#catTree li').hover(
     function(e) { 
      e.stopPropagation(); 
      $(this).children('span').css('display','inline'); 
     }, 
     function(e) { 
      e.stopPropagation(); 
      $(this).children('span').css('display','none'); 
     } 
    ); 

http://jsfiddle.net/techunter/B5ZwE/

但如果你先懸停在標題，然後在其子女懸停它不視爲徘徊。

Answer 3

有花了年齡思考，30秒後，我的工作了發佈後...

不要在LIS（因爲父李覆蓋兒童），懸停在一個額外的跨度，而不是徘徊：

<ul id="catTree"> 
<li><span>Header 1 <span>(blah)</span> </span> 
    <ul> 
     <li><span>Branch 1 <span>(blah)</span> </span></li> 
     <li><span>Branch2 <span>(blah)</span></span></li> 

和

 $(function() { 
    $('#catTree li>span').hover(
     function() { 
      $(this).children('span').css('display','inline'); 
     }, 
     function() { 
      $(this).children('span').css('display','none'); 
     } 
    ); 

});