防止在子级上触发父级mouseout jQuery事件

Question

这可能是一个已知的问题或问题。但是，我只看到

的结果

Element.on('click', callback)

事件，我不知道如何使用'mouseout'事件

执行此操作

这是我的HTML：

<div class="oneTodo">
  <div class="todoText"></div>

  <span class="eraseTodo">
    <i class="icon ion-ios-close-outline"></i>
  </span>
</div>

我的剧本：

$('.oneTodo').hover(function () {
    $(this).find('.eraseTodo').fadeIn(100);
});

$('.oneTodo').on('mouseout', function() { // this is what is not working
    $(this).find('.eraseTodo').fadeOut(100);
});

基本上当我将鼠标悬停在我的上方时：

<span class="eraseTodo">
  <i class="icon ion-ios-close-outline"></i>
</span>

因为它基本上不再是.oneTodo div了，它会逐渐消失。我想阻止这个。我怎样才能做到这一点？

P.S：我试过了：

$('.oneTodo:not(.eraseTodo)').on('mouseout', function() {
    $(this).find('.eraseTodo').fadeOut(100);
});

但悲惨地失败了。