当使用 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?

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

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

元素的颜色更改为白色

Here's the JsFiddle

<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>

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

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

这是 JsFiddle,我希望它是您要找的。 (是的,你也可以改变它们的颜色)