有没有办法防止鼠标悬停在图像上时图像闪烁? 我相信,当鼠标进入一个区域,然后在该区域上方显示一个图像,然后如果移动鼠标,那么现在鼠标位于 map 特定区域上方弹出的图像上,所以会出现问题到 mouseleave 部分,它开始闪烁。
js:
$(document).ready(function() {
$(".map-hovers img").hide();
var idx;
$(".map-areas area").mouseenter(function() {
idx = $(".map-areas area").index(this);
$(".map-hovers img:eq(" + idx + ")").show();
return false;
}).mouseleave(function() {
$(".map-hovers img").hide();
return false;
})
});
html:
<div id="container">
<img src="includes/images/map_09.png" border="0" usemap="#country"/>
<div class="map-hovers">
<img class="North" src="includes/images/map_03.png" alt="North"/>
</div>
<map name="country" class="map-areas">
<area shape="poly" cords="83,93,83,84,83,80,86,78"/>
</map>
</div>
最佳答案
你的假设是完全正确的,我认为如果显示的元素是该区域的子元素,它会起作用...所以解决方案可能是处理所有内容的父元素(#container)上的事件或添加如果任何 .map-hovers img 悬停,则显示一个标志
$(document).ready(function() {
var idx,
isOverImg = false;
$(".map-hovers img").hide()
.mouseenter(function(){ isOverImg = true;})// add these handlers
.mouseleave(function(){ isOverImg = false;});
$(".map-areas area").mouseenter(function() {
idx = $(".map-areas area").index(this);
$(".map-hovers img:eq(" + idx + ")").show();
return false;
}).mouseleave(function() {
if(!isOverImg) $(".map-hovers img").hide();// add the condition
return false;
})
});
关于javascript - 图像在 mouseenter 事件 JQuery 上不断闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25463043/