Question

I have following html structure:

<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>

And following JS code:

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

The problem is that when mouse pointer is at #127 .testDate in #123 also displayed. I think it’s because hover works for parent element. How to fix it?

Thanx!

Answer 1

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