jQuery鼠标事件：如果元素移动，如何触发回调？

Question

我有以下来源：

$("body").on('mouseenter', '.tile-2', function () {
  $(".tile-explanation-embarklogo").fadeIn(400)
}).on('mouseleave', '.tile-2', function () {
  $(".tile-explanation-embarklogo").fadeOut("200")
});

当光标悬停在带有tile-2类的元素上时，将显示一个隐藏的div。 因此，当光标悬停在元素上时，我再次隐藏了div。

问题是，有时tile-2元素会自行移动甚至消失（用户输入可以移动tile-2元素）。 这是有问题的，因为光标永远不会悬停在元素本身上，并且我无法隐藏div。 它永远存在，无法将其删除。

我也该如何打电话：

$(".tile-explanation-embarklogo").fadeOut("200")

当图块本身从光标移开时？

Answer 1

我不确定为什么在body标签上有您的侦听器，但是请尝试一下：

$('.tile-2').on('mouseenter', function() 
{
    $('.tile-explanation-embarklogo').fadeIn(400);
});

$('.tile-2').on('mouseleave', function() 
{
    $('.tile-explanation-embarklogo').fadeOut(200);
});

Answer 2

您也可以尝试悬停事件，让jquery为您完成工作：

$('.tile-2').hover(function () {
    $(".tile-explanation-embarklogo").fadeIn(400)
}, function () {
    $(".tile-explanation-embarklogo").fadeOut("200")
});