javascript - jQuery - 鼠标输入闪烁图像

Question

我正在尝试在 div 上进行简单的悬停并显示/隐藏图像。

这是小提琴：http: //jsfiddle.net/s2WWM/

我究竟做错了什么？

Answer 1

使用mouseenterandmouseleave代替mouseoverandmouseout

http://jsfiddle.net/s2WWM/2/

还将它绑定在容器元素上。

这些事件之间的区别在于mouseenter，mouseleave仅当您完全离开元素时才计数，而当您离开元素时mouseover计数mouseout，无论您是否仍在元素内。

例如，当您将外部元素留给内部元素时，那是 amouseout但不是 a mouseleave，因为您仍在外部元素内部。

Answer 2

问题是，当您将鼠标悬停在 .fullscreen 上时，您将不再悬停在 #canvas 上，因此请像这样更改它：

$(document).ready(function () {

    $("#canvas, .fullscreen").mouseover(function() {
        console.log("Show...");
    $(".fullscreen").show();
  }).mouseout(function(){
    $(".fullscreen").hide();
  });

});​