如何在 Jquery 中使用 mouseenter 提取嵌套元素？答案

【问题标题】：How to extract nested element with mouseenter in Jquery?如何在 Jquery 中使用 mouseenter 提取嵌套元素？
【发布时间】：2015-08-31 19:09:00
【问题描述】：

我有一些 cmets 树。默认情况下，评论底部的链接（如编辑或回复）是隐藏的（通过 CSS）。我需要在鼠标下显示特定的评论。好的，我使用这样的代码：

 $('[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');
});

它适用于这样的 html（简化版）：

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

将鼠标悬停在嵌套的 div 上，我看到所有元素（带有 actionComment 类）都被选择为可见。但我想在 $(this) 中有嵌套元素并只显示他的 cmets。由于这个dev是由用户的cmets构建的，嵌套的级别可以任意。

【问题讨论】：

标签： jquery nested mouseenter

【解决方案1】：

你可以试试这个？

$('[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>

这是code

【讨论】：

我错过了关闭 div。已编辑。