javascript - 图像在 mouseenter 事件 JQuery 上不断闪烁

Question

有没有办法防止鼠标悬停在图像上时图像闪烁？我相信，当鼠标进入一个区域，然后在该区域上方显示一个图像，然后如果移动鼠标，那么现在鼠标位于 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>

Answer 1

你的假设是完全正确的，我认为如果显示的元素是该区域的子元素，它会起作用...所以解决方案可能是处理所有内容的父元素(#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;
    })
});