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选择第一个匹配的DOM元素。

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

在嵌入表的情况下删除鼠标悬停事件问题

1 个答案: