javascript - 为什么mouseleave一直在触发？

我正在尝试创建 map ，当我将鼠标悬停在按钮上时，该 map 的某个位置应突出显示。当鼠标进入覆盖图像时，它会按原样显示，但是当鼠标移动时，在悬停按钮内，覆盖图像会闪烁，并且会重复触发mouseEnter和mouseLeave事件。我还尝试了mouseOver，hover和mouseout的结果相同。难道我做错了什么？

HTML:

  <div id="map">
                <img src="images/map/map.png" />
                <img src="images/map/mapHover.png" id="hoverhighlands" class="hoverButton"/>
                <img src="images/map/mapHover.png" id="hovernorth" class="hoverButton"/>
                <img src="images/map/mapHover.png" id="hovercentral" class="hoverButton"/>
                <img src="images/map/mapHover.png" id="hoverlothian"class="hoverButton" />                    <img src="images/map/mapHover.png" id="hoverwest" class="hoverButton" />
                <img src="images/map/central.png" class="mapOverlay" id="central" />
                <img src="images/map/highlands.png" class="mapOverlay" id="highlands" />
                <img src="images/map/lothian.png" class="mapOverlay" id="lothian" />
                <img src="images/map/northeast.png" class="mapOverlay" id="north"/>
                <img src="images/map/west.png" class="mapOverlay" id="west"/>
            </div>

JS:

function setMapOverlays() {
    $(".mapOverlay").hide();
    $(".hoverButton").mouseenter(
        function () {
            var id = $(this).attr('id');
            id = id.substr(5);

            showOverlay(id);
        }).mouseleave(function () {
            console.log('mouseleave');
            var id = $(this).attr('id');
            id = id.substr(5);
            hideOverlay(id);
        })

}

function showOverlay(id) {
    $('#' + id).show();
}

function hideOverlay(id) {
    $('#' + id).hide();
}

编辑

好的，我知道为什么它不起作用。当.show()函数触发时，我的叠加图像被放置在hoverButtons顶部，触发onmouseleave。

我设法验证是否将z-index:2放在hoverButton上，将z-index:1放在mapOverlay上。这样，当我移动鼠标时不会触发该事件。

所以我有一个临时解决方案。将onmouseleave事件移动到我的mapOverlays而不是hoverButtons上就可以了。
函数setMapOverlays(){
$(“。mapOverlay”)。hide();
$(“。hoverButton”)。mouseenter(
函数(){
console.log('enter');
var id = $(this).attr('id');
id = id.substr(5);

            showOverlay(id);
        });

    $('.mapOverlay').mouseleave(function () {
        console.log('mouseleave');
        hideOverlay($(this));
    })
}

这有效，但不是所需的行为。当鼠标移出hoverButton时，我希望Overlay隐藏。有什么建议吗？

两张图片可帮助您确切地解释我在做什么:

最佳答案

不要为hoverButton类使用mouseleave事件。尝试在显示时处理重叠中的mousemove事件，并检查启动重叠显示方法的元素是否仍在。

function setMapOverlays() {
    $(".mapOverlay").hide();
    $(".hoverButton").mouseenter(function() {
        var id = $(this).attr('id');
        id = id.substr(5);

        showOverlay(id, this);
    });
};

function showOverlay(id, initiator) {
    initiator = $(initiator);
    initiatorBoundary = {
        x1: initiator.offset().left,
        x2: initiator.offset().left + initiator.outerWidth(),
        y1: initiator.offset().top,
        y2: initiator.offset().top + initiator.outerHeight()
    };

    $('#' + id).mousemove(function(event) {
        if (event.pageX < initiatorBoundary.x1 || event.pageX > initiatorBoundary.x2 || event.pageY < initiatorBoundary.y1 || event.pageY > initiatorBoundary.y2) {
            $(this).hide();
        }
    }).show();
}​

jsFiddle here

顺便说一句，也许没有覆盖元素会更容易实现。您是否考虑过更改mouseenter和mouseleave上的整个 map 图像？