鼠标悬停在内部元素上时丢失鼠标悬停

Question

我有如下例子。当鼠标位于<div>之上时，如何避免<span>上的“鼠标悬停丢失”？

<div id="box">
  ABC
  <span style="font-size: 10px; font-weight: normal;">abc</span>
</div>

现场演示here。

Answer 1

切换到mouseenter＆amp; mouseleave; http://jsfiddle.net/alexk/PjhmC/3/

  

mouseenter事件与鼠标悬停的处理方式不同   事件冒泡。如果在这个例子中使用鼠标悬停，那么当   鼠标指针移动到Inner元素上，处理程序就是   触发

Answer 2

使用jquery hover而不是mouseenter / mouseout，例如

$('#box').hover(function(){
   //Enter code
},
function(){
   //Exit code
});

正如另一位用户所提到的，你可以使用鼠标输入和鼠标离开的链式事件，例如

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

但是，悬停只是上述简写。