Jquery vol stationnaire seulement au dernier élément

Question

je suit la structure 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> 

Et suivant le code JS:

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

Le problème est que lorsque le pointeur de la souris est à #127.testDate dans #123 également affiché . Je pense que c'est parce que hover fonctionne pour l'élément parent. Comment le réparer?

Merci!

Answer 1

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

Answer 2

Je pense que c'est parce que vous avez un élément '.test' dans un autre '.test'. Si vous les divisez, votre code fonctionnera. Here est exemple de travail.