Question

有没有办法防止图像在鼠标悬停时闪烁？我相信当鼠标进入某个区域时会出现问题，然后在该区域上方显示图像，然后如果移动鼠标，则现在鼠标位于地图特定区域上方的弹出图像上，到了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;
    })
});

图像在mouseenter事件JQuery上一直闪烁

1 个答案: