Comment extraire un élément imbriqué avec mouseenter dans Jquery?

Question

J'ai quelques arbres de commentaires. Par défaut, les liens au bas du commentaire (comme Modifier ou Répondre) sont cachés (via CSS). J'ai besoin de montrer un commentaire spécifique, qui est sous la souris. OK, j'utilise ce code:

$('[data-comment-id]').on('mouseenter', function(){ 
    console.log('mouseenter'); 
    $(this).find('.actionComment').css('visibility','visible'); 
}); 

$('[data-comment-id]').on('mouseleave', function(){ 
    console.log('mouseleave'); 
    $(this).find('.actionComment').css('visibility','hidden'); 
}); 

Il fonctionne avec html comme ceci (version simplifiée):

<div data-comment-id="1101"> 
    <span class="text">Text of comment</span> 
<span class="actionComment">[Links]</span> 
    <div data-comment-id="1102"> 
     <span class="text">Text of comment 1</span> 
     <span class="actionComment">[Links]</span> 
    </div> 
    </div> 

souris Ayant plus div emboîtée, je vois que tous les éléments (avec class actionComment) est sélectionné pour être visible. Mais je voudrais avoir dans $ (this) l'élément imbriqué et montrer seulement ses commentaires. Becouse de ce dev sont construits par les commentaires de l'utilisateur, le niveau d'imbrication peut être par n'importe qui.

Answer 1

Vous pourriez essayer?

$('[data-comment-id]').on('mouseenter', function(){ 
    console.log('mouseenter'); 
    $(this).find('.actionComment').css('visibility','visible'); 
}); 

$('[data-comment-id]>[data-comment-id]').on('mouseleave', function(){ 
    console.log('mouseleave'); 
    $(this).find('.actionComment').css('visibility','hidden'); 
}); 

---

<div data-comment-id="1101"> 
    <span class="text">Text of comment</span> 
    <span class="actionComment">[Links]</span> 
<div data-comment-id="1102"> 
    <span class="text">Text of comment 1</span> 
    <span class="actionComment">[Links]</span> 
</div> 

C'est le code