jquery - 图像映射 : show different images on hover

Question

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

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

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

带有热点的主 map :

高亮显示国家的背景 map :

我的代码:

<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: 这似乎已得到解答 here已经在使用 mouseenter 和 mouseleave 而不是 hover

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

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

下

$(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();
    });

});

body {

}

<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;"/>

---

旧答案

这可能不是最好的方法，但它似乎有效。

它的作用是进行 2 次悬停检查。一个用于#point-france，一个用于 .map-france。