Removing Mouseover Event Issue In Case Of Embedded Tables

Best described as example in this Fiddle My goal is to show the crosses when the user hovers above the tables. The problem is that the mouse-over event behavior is very strange, an

Solution 1:

Use :first pseudo selector

: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)
  });
});


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

<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"  /><scriptsrc="https://code.jquery.com/jquery-3.0.0.min.js"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><style>.zeon-remove-sign {
    display: none;
  }
</style><table><tbody><trid='1'><td><spanclass='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>AAAAAAA
        <table><tbody><trid='2'><td><spanclass='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span></td><td>BBBBBBBBBBB</td></tr><trid='3'><td><spanclass='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span></td><td>CCCCCCCCCCC</td></tr></tbody></table></td></tr></tbody></table>