3

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

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

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

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

CSS：

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

查询：

$(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");
     }
   });
});

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

谢谢你们！

4

2 回答 2

0

主要问题是悬停事件是如何触发的，mouseenter在 a 之后肯定不会触发moueleave，依此类推。

我试图改变方法并改用mousemove事件。

为了避免 div 在 mousemove 中闪烁，我保存了当前显示的状态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/

于 2013-08-14T18:01:18.957 回答
0

假设：

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

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

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

可能的解决方案：

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

于 2013-08-14T17:49:30.453 回答