为<li>绑定鼠标悬浮事件遇阻：无法正确触发img显示的问题咨询

这个问题我之前也碰到过，其实核心是搞懂mouseover/mouseout和mouseenter/mouseleave的事件冒泡差异，再结合正确的元素选择方式就能解决。

先给你拆解下问题原因：

• 用mouseover绑定<li>时，鼠标在<li>内部的子元素之间移动会反复触发事件，是因为mouseover是冒泡事件——当你从<li>的一个子元素移到另一个子元素时，会触发子元素的mouseover，这个事件会冒泡到<li>上，导致你的处理函数反复执行。
• 你说用mouseenter绑定<li>时触发事件的是子元素，大概率是在事件处理函数里错用了event.target（它指向鼠标实际进入的子元素），但实际上mouseenter是不冒泡的，事件本身就是<li>触发的，你应该用this来指代绑定事件的<li>元素。

接下来给你两种解决方案，优先推荐第一种，简单高效：

方案一：用CSS实现（无JS依赖，最推荐） #

如果只是单纯的显示/隐藏图片，CSS的:hover伪类完全能搞定，不需要写JS：

/* 默认隐藏目标图片 */
.wantToShow {
  display: none;
}

/* 当<li>悬浮时，显示内部的.wantToShow图片 */
li:hover .wantToShow {
  display: block;
  /* 要是需要渐变效果，可以用opacity + transition：
  opacity: 1;
  transition: opacity 0.3s ease;
  记得默认状态也要加opacity: 0; */
}

方案二：用jQuery的mouseenter/mouseleave事件 #

如果必须用JS（比如有额外的交互逻辑），可以这么写：

// hover()是mouseenter和mouseleave事件的简写
$('li').hover(
  // 鼠标进入<li>时执行
  function() {
    // this就是当前触发事件的<li>，查找内部的.wantToShow并显示
    $(this).find('.wantToShow').show();
  },
  // 鼠标离开<li>时执行
  function() {
    $(this).find('.wantToShow').hide();
  }
);

或者分开绑定事件：

$('li').on('mouseenter', function() {
  $(this).find('.wantToShow').show();
}).on('mouseleave', function() {
  $(this).find('.wantToShow').hide();
});

这里的关键是用this来获取当前的<li>，再通过find()定位到内部的图片，而不是去管event.target，这样就不会出现子元素触发的误解了。

另外，如果你的<li>是动态生成的（比如后续通过JS添加的），记得用事件委托：

// 绑定到<ul>上，委托给所有li子元素
$('ul').on('mouseenter', 'li', function() {
  $(this).find('.wantToShow').show();
}).on('mouseleave', 'li', function() {
  $(this).find('.wantToShow').hide();
});

内容的提问来源于stack exchange，提问作者junep