我正在尝试创建 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。
我设法验证了在 hoverButton 上放置了 z-index:2,在 mapOverlay 上放置了 z-index:1。这样,当我移动鼠标时,事件就不会被触发。
所以我有一个临时修复。将 onmouseleave 事件移动到我的 mapOverlays 而不是我的 hoverButtons 就达到了目的。 函数 setMapOverlays() { $(".mapOverlay").隐藏(); $(".hoverButton").mouseenter( 功能 () { console.log('输入'); 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();
}
顺便说一句,如果没有覆盖元素,可能会更容易实现。您是否考虑过在 mouseenter 和 mouseleave 上更改整个 map 图像?
关于javascript - 为什么 mouseleave 一直在触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12894376/