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 时 #123 中的 .testDate 也会显示。我认为这是因为悬停适用于父元素。如何修复它？

谢谢！

Answer 1

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

Answer 2

我认为这是因为你在另一个“.test”中有一个元素“.test”。如果你拆分它们，你的代码就可以工作。 这里是工作示例。