VS容器窗口报告mouseover事件的鼠标悬停，为什么？

Question

首先，这不是问题，因为代码工作正常。我在谈论VS Containers。

代码：

$(document).on({
    mouseenter: function () {
        $(this).find('span').removeClass('hidden').addClass('show')
    },
    mouseleave: function () {
        $(this).find('span').removeClass('show').addClass('hidden')
    }
}, '.input .img-preview');

当我点击mouseenter功能时，它就是

当我点击mouseleave功能时，它就是

所以，我认为出了点问题。然后，我尝试了另一个代码：

$(document).on('keypress', '.input', function () {

});

VS检测到它是否正确：

我的问题：什么是错的？或者它是VS错误？

更新：（基于@Liam的评论）

我已将mouseenter替换为mouseover，将mouseleave替换为mouseout。有一个错误。

HTML code：

<div class="main input">
    <img src="~/Content/images/user.png" />
    <div>
        <span contenteditable="true" placeholder="Write you comment..."></span>
        <span>
            <i class="fa fa-camera" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Add image"></i>
            <i class="fa fa-smile-o" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Smiley"></i>
        </span>
        <br />
        <div class="img-preview">
            <span class="hidden" data-toggle="tooltip" data-placement="top" title="Delete image">
                <i class="fa fa-times-circle" aria-hidden="true"></i>
            </span>
            <img src="~/Content/images/hamy.jpg" />
        </div>
    </div>
</div>

请注意这些：

data-toggle="tooltip" data-placement="top" title="Add image"
data-toggle="tooltip" data-placement="top" title="Smiley"
data-toggle="tooltip" data-placement="top" title="Delete image"

我已关注this plug-in使用工具提示。但它仅适用于mouseenter/mouseleave，而不适用于mouseover/mouseout。因此，如果我将mouseenter更改为mouseover，则无效。

这也意味着：mouseenter 非与mouseover类似。

Answer 1

mouseneter和mouseleave只是mouseover和mouseout的精简重命名包装器。如果您查看jQuery source code，则可以看到：

// Create mouseenter and mouseleave events
jQuery.each({
  mouseenter: "mouseover",
  mouseleave: "mouseout"
}, function( orig, fix ) {
  jQuery.event.special[ orig ] = {
      setup: function( data ) {
          jQuery.event.add( this, fix, data && data.selector ? delegate : withinElement, orig );
      },
      teardown: function( data ) {
          jQuery.event.remove( this, fix, data && data.selector ? delegate : withinElement );
      }
  };
});

所以这实际上只是将（orig）mouseenter（jQuery.event.special[ orig ]）事件重新映射为“修复”mouseover（jQuery.event.add( this, fix...）。因此，无论出于何种目的，它们都是相同的。

vs只是在树jqueryobject.events.mouseover下面跟着这个。此对象结构在此处创建：jQuery.event.add( this, "mouseover"...

keypress是“正确的”，因为jQuery没有为keypress完成此映射。