Question

我在浏览器上使用带有US Map的jQuery .hover时遇到问题。发生的事情是当你将鼠标悬停在状态上时，似乎.hover被卡住了，并且没有鼠标中心事件触发。有时它会再次开始工作然后停止。

我已经设置了一个示例here，以便您可以看到我正在尝试做的演示。

如果你只是移动鼠标，会弹出一个显示状态名称的小div。在移动鼠标时，您应该注意到它会停止更新div。如果你移出地图并重新进入，它会再次开始工作。

我确定我的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");
     }
   });
});

P.S。我没有在这里发布html，因为它很长，但是在jsfiddle示例中。

谢谢大家！

Answer 1

假设：

我认为这里的问题是你正在使用悬停事件。悬停意味着您已输入指定的元素。这将在鼠标进入时触发一次，而不是再次触发，直到鼠标离开然后重新进入该元素。显然，你的地图无法覆盖那里的整个美国地图（有“漏洞”的覆盖范围）。我相信这就是为什么你的div似乎不规律地出现了。当鼠标光标离开地图覆盖的坐标时，悬停事件可以再次自由触发。

因此，例如，您将鼠标悬停在德克萨斯州上，然后当您将鼠标悬停在俄克拉荷马州上时，您碰巧不会离开图像地图所覆盖的坐标，这意味着悬停事件不会再次触发。然后将鼠标移动到地图之外，然后当您重新输入它时，它似乎再次起作用。这也可能发生在存在覆盖漏洞的州之间。

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

可能的解决方案：

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

Answer 2

主要问题是如何触发悬停事件，mouseenter之后肯定不会触发moueleave，等等。

我尝试更改方法并改为使用mousemove事件。

为了避免鼠标移动中的div闪烁，我保存当前显示的状态currid，并在显示之前检查它是否相同，它似乎工作得很好。

代码：

var data;
var hblock = [];
var stateid;
var currid = -1;
$(document).ready(function () {
    $('#ImageMap').mousemove(function (event) {
        var left = event.pageX;
        var top = event.pageY;
        if (currid != event.target.id) {
            $("#popupdiv").css("visibility", "hidden");
            $("#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'
            });
            stateid = event.target.id;
            currid = stateid;
        }  
    })
});

演示：http://jsfiddle.net/IrvinDominin/tUCSF/

遇到jquery .hover和Firefox上的地图问题

2 个答案:

假设：

可能的解决方案：