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>