javascript - 消除嵌入表格时的鼠标悬停事件问题

Question

在此 Fiddle 中作为示例进行了最佳描述我的目标是当用户将鼠标悬停在表格上方时显示十字。问题是鼠标悬停事件的行为非常奇怪，并且会为所有子级触发。这是我的 previous question 的后续内容，在这里我试图更具体地描述这个案例。

有什么想法吗？

$(function() {
    $(document).on('mouseover', 'table tbody tr', function (e) {  change_editor_icon_visibility($(this), true)});
    $(document).on('mouseout', 'table tbody tr', function (e) {  change_editor_icon_visibility($(this), false)});
});


function change_editor_icon_visibility(row_obj, mode)
{
    var elem = row_obj.find('tr:hover').length ?       
    row_obj.find('tr:hover:last') : row_obj;
        elem.find('td span.zeon-edit-pencil').toggle(mode);
}

Answer 1

使用:first伪选择器

:first Selector Selects the first matched DOM element.

$(function() {
  $(document).on('mouseover', 'tr', function(e) {
    e.stopPropagation();
    change_editor_icon_visibility($(this), true)
  });
  $(document).on('mouseout', 'tr', function(e) {
    e.stopPropagation();
    change_editor_icon_visibility($(this), false)
  });
});


function change_editor_icon_visibility(row_obj, mode) {
  row_obj.find('td span.zeon-edit-pencil:first').toggle(mode);
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
  .zeon-remove-sign {
    display: none;
  }
</style>

<table>
  <tbody>
    <tr id='1'>
      <td><span class='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>AAAAAAA
        <table>
          <tbody>
            <tr id='2'>
              <td>
                <span class='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>
              </td>
              <td>BBBBBBBBBBB</td>
            </tr>
            <tr id='3'>
              <td>
                <span class='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>
              </td>
              <td>CCCCCCCCCCC</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>