Question

我有一张照片和一张div。 div是隐藏的（display：none;）。我想在鼠标悬停在图片上时显示div，并在鼠标未在图片上方时再次隐藏div。我使用mouseenter（）和mouseleave（）事件来执行此操作，但当moue在图片上时，两个函数都重复工作。这是我定义函数的代码：`

$("#pic").mouseenter(function(){
  $("#checkin").slideDown();
});
$("#pic").mouseleave(function(){
  $("#checkin").slideUp();
});

我也尝试了悬停方法但结果是一样的。

$("#pic").hover(
  function(){
    $("#checkin").slideDown(200);
  },
  function(){
    $("#checkin").slideUp(200);
  }
);

问题是什么，我无法理解。

更新这是HTML代码

<tr><td valign='top' class='checkinpic'><img src='img.png' id='pic' height='100%'></td></tr>

...

<div id='checkin'>
You are not going to any activity this week.
</div>

Answer 1

我找到了解决方案。当我更改了与mouseleave事件一起使用的元素时，它起作用了：

var block = false;
$("#pic").mouseenter(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideDown(400, function(){
        block = false;
    });
}
});
$("#pic").mouseleave(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideUp(400, function(){
        block = false;
    });
}
});

感谢您的帮助。

<强>更新我注意到给图片和div一个类并定义类的mouseenter和mouseleave事件是一个更好的解决方案。

Answer 2

可能会修复这样的事情：

var block = false;
$("#pic").mouseenter(function(){
    if(!block) {
        block = true;
        $("#toggleDiv").slideDown(400, function(){
            block = false;
        });
    }
});
$("#pic").mouseleave(function(){
    if(!block) {
        block = true;
        $("#toggleDiv").slideUp(400, function(){
            block = false;
        });
    }
});

http://jsfiddle.net/BnPJ4/

Answer 3

以下是根据您的代码编辑的解决方案，希望它能为您提供全面的帮助。

$("#pic").hover(function() {
    $("#checkin").slideDown(200);
},
function() {
    $("#checkin").slideUp(200);
});

点击下面的链接运行代码

http://jsfiddle.net/ByZ2z/5/

jQuery mouseenter（）和mouseleave（）函数重复工作

3 个答案: