jquery - 在 Firefox 上使用 jquery .hover 和 map 时遇到问题

Question

我在 Firefox 上使用 jQuery .hover 和美国 map 时遇到问题。发生的情况是，当您将鼠标悬停在状态上时，.hover 似乎被卡住，并且没有 mouseenter 事件触发。有时它会再次开始工作然后停止。

我设置了一个示例 here这样您就可以看到我正在尝试做的事情的演示。

如果您只是移动鼠标，就会弹出一个小 div，显示州名称。您应该注意到，在移动鼠标时，它会在某个时候停止更新 div。如果您移出 map 并返回，它会再次开始工作。

我确信我的 js 代码不正确，但只是需要帮助。

CSS:

#popupdiv {
    width: 200px;
    height: auto;
    visibility: hidden;
    background: white;
    border: 1px solid;
}

JQuery:

$(document).ready(function () {
$('#ImageMap').hover(function (event) {
     var left = event.pageX;
     var top = event.pageY;
     if (event.type == "mouseenter") {
         $("#popupdiv").html("This is "+event.target.title);
         scrh = $(window).height();
         scrw = $(window).width();
         divh = $("#popupdiv").height();
         divw = $("#popupdiv").width();
         $("#popupdiv").css({
             position: 'absolute',
             top: top,
             left: left,
             visibility: 'visible'
         });
     } else {
         $("#popupdiv").css("visibility", "hidden");
     }
   });
});

附注我没有在这里发布 html，因为它很长，但在 jsfiddle 示例中。

谢谢大家!

Answer 1

假设:

我认为这里的问题是您正在使用悬停事件。悬停表示您已进入指定元素。当鼠标进入时，此事件将被触发一次，直到鼠标离开并重新进入该元素时才会再次触发。显然，您的 map 无法覆盖那里的整个美国 map (存在覆盖“漏洞”)。我相信这就是为什么你的 div 看起来不规律的原因。当鼠标光标离开 map 覆盖的坐标时，悬停事件可以再次触发。

例如，您将鼠标悬停在德克萨斯州上空，然后当您将鼠标悬停在俄克拉荷马州上空时，您碰巧永远不会留下图像 map 覆盖的坐标，这意味着悬停事件不会再次触发。然后，您将鼠标移到 map 之外，然后当您重新进入时，它似乎又可以工作了。这种情况也可能发生在存在覆盖漏洞的州之间。

请注意，这只是一个假设，因为我对 HTML 中的坐标映射不太熟悉，这显然是一个相当复杂的问题。

可能的解决方案:

我认为您应该添加一个事件来监视鼠标移动。然后继续检查鼠标是否位于图像 map 中，如果是则显示指定的图像标题。