jQuery的只在最後一個元素

Question

我有以下HTML結構懸停：

<div id="123" class="test"> 
    <div class="testMessage">Foo</div> 
    <div><div class="testDate">2010</div></div> 
    <div id="127" class="test"> 
     <div class="testMessage">Bar</div> 
     <div><div class="testDate">2011</div></div> 
    </div> 
</div> 

而且下面的JS代碼：

$(".test").live({ 
    mouseenter: 
     function() 
     { 
      $(this).find(".testDate").show(); 
     }, 
    mouseleave: 
     function() 
     { 
      $(this).find(".testDate").hide(); 
     } 
}); 

的問題是，當鼠標指針在#127.testDate在#123也顯示。我認爲這是因爲懸停適用於父元素。如何解決它？

感謝名單！

Answer 1

$(".test").live({ 
    mouseenter: function() { 
     $('.testDate:first', this).show(); 
    }, 
    mouseleave: function() { 
     $('.testDate:first', this).hide(); 
    } 
}); 

Answer 2

我想這是因爲你在另一個'.test'裏面有一個元素'.test'。如果你將它們分開，你的代碼將起作用。 Here是工作示例。