当使用 imagemapster 将它们悬停在上方时，如何让覆盖文本（如 <h1>）停止停止我想要在 <area> 上发生的效果？

Question

所以我查看了 Whosebug 上的其他地方，并没有具体遇到这个问题，这是在将鼠标悬停在文本 (< h1s >) 上时对地图 < area > 的影响的否定位于地图 < 区域 > 之上。

还有第二个兴趣点是如何在激活（或悬停）在<区域>上时将所有

元素的颜色更改为白色

<div class="map" >
<p class="map__text--1">North York</p>
<p class="map__text--2">Wellington</p>
<img id="vegetables" src="https://i.ibb.co/3FZHC33/map-popup.png" usemap="#veg" >
                <map name="veg" id="veg-map">
                    <area shape="poly" data-key="TO" alt="" coords="261,356, 252,355, 248,352, 238,347, 226,344, 220,345, 215,348, 209,351, 209,351, 205,348, 203,347, 200,345">
</map>

Answer 1

我解决了你的问题，在 <area> 标签上应用标识符并在每个 h1 元素上应用全局类名，你可以根据需要自定义。然后我写了这个小片段。

$('#example0').hover(
function() { $('.map_text0').hide(); }, 
function() { $('.map_text0').show(); });

这是 JsFiddle，我希望它是您要找的。（是的，你也可以改变它们的颜色）

当使用 imagemapster 将它们悬停在上方时，如何让覆盖文本（如 <h1>）停止停止我想要在 <area> 上发生的效果？

How do I get the overlying text (like <h1>) to stop stopping the effect I want to happen on <area> when they're hovered over while using imagemapster?

html

javascript

css

imagemapster