图像映射：在悬停时显示不同的图像

Question

所以我在一个网站上工作，我有一个包含不同热点的地图，当你点击它们时会显示不同国家的信息。此外，突出显示的国家/地区看起来与地图的其他部分略有不同。

因此我将每个国家/地区保存为不同的图像，空地图（带有热点）是透明的png。当我将鼠标悬停在法国上方时，突出显示法国的地图将显示在主地图后面，当我从地图的该部分移除光标时，它将隐藏图像。

但出于某种原因，当我将鼠标悬停在热点上时，除非我停止移动鼠标，否则法国的图像会开始闪烁。

热点主图：

突出显示的国家/地区的背景地图：

我的代码：

<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
    <map name="image-maps" id="ImageMapsCom-image-maps">
        <area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
        <area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
        <area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
        <area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
    </map>
    <img src="/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

JS：

$('#point-france').hover(function() {
    $('.map-france').show();
    $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '1' });
},function() {
    $('.map-france').hide();
});

任何人都可以帮我弄清楚为什么会这样吗？

JSFiddle Example

Answer 1

编辑2 ：这似乎已经使用mouseenter和mouseleave代替hover

回答了here

编辑：调整CSS以将point-france的z-index更改为2，将.map-france更改为-1

问题似乎是当它移动地图并显示它不再检测到悬停时。因此，当您移动鼠标时，它会刷新并隐藏地图，然后再显示地图。更改Z-index以使map-france低于point-france

＆＃13;

＆＃13;

$(document).ready(function() {

  $('#point-france').hover(function() {
      $('.map-france').show();
      $('#point-france').css({'z-index':'2'});
      $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '-1' });
    },function() {
      $('.map-france').hide();
    });

});

＆＃13;

body {

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="https://www.maloufsleep.com/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
		<map name="image-maps" id="ImageMapsCom-image-maps">
			<area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
			<area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
			<area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
			<area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
		</map>
		<img src="https://www.maloufsleep.com/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

＆＃13;

＆＃13;

＆＃13;

OLD ANSWER

这可能不是最佳方式，但似乎有效。

这样做有2次悬停检查。一个用于＃point-france，一个用于.map-france。