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'中有一个'。test'元素。如果你拆分它们，你的代码就可以了。 Here正在运作。

Answer 2

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