Question

似乎 mouseenter / mouseleave 方法不仅在鼠标坐标进入目标的客户端矩形时触发，而且在其他元素发现或覆盖目标时触发。这是一个问题，因为在我的 mouseenter 回调中，我想在目标顶部显示另一个元素E.我也希望E在 mouseleave 上消失。您可以将此视为重叠的工具提示。

然而，当我将鼠标移动到目标上时，会触发 mouseenter ，元素E会覆盖它。此覆盖范围进一步触发 mouseleave 事件，因此E将消失。这进一步触发 mouseenter 事件，因此E将再次出现.....这是一个非常令人头疼的问题。

所以基本上，我想知道是否有 mouseenter / mouseleave 的版本只关心鼠标是否进入或离开目标的客户端矩形，目标是否被覆盖。

更新：@arunopjohny创建了一个JS小提琴来说明这个问题。见评论

Answer 1

在相关问题中找到完美的解决方案：Ignore mouse interaction on overlay image

“pointer-events：none;”属性将禁用该元素的任何鼠标事件。更重要的是，事件将“通过”到它下面的元素。在我的问题中使用覆盖元素E解决问题。

Answer 2

尝试

jQuery(function ($) {
    $('#target').hover(function () {
        var $target = $(this);
        clearTimeout($target.data('hoverTimer'));
        $('#e').show();
    }, function () {
        var $target = $(this);
        var timer = setTimeout(function () {
            $('#e').hide();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#e').hover(function () {
        clearTimeout($('#target').data('hoverTimer'));
    }, function () {
        $(this).hide();
    });
});

演示：Fiddle

mouseenter / mouseleave忽略覆盖元素

2 个答案: