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?

So I've looked elsewhere on StackOverflow and haven't come accross this problem specifically, which is the negation of the effect on map < area > when hovering over texts (< h1s >) that are in & overtop that map < area >.

There's a second point of interest as well which is how to change all of the < h1 > element's colors to white when activating (or hovering) over a < 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>

I solved your problem applying an identifier on the <area> tag and applying global classname on each h1 element which you can customise as you wish. Then i wrote this little snippet.

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

Here's the JsFiddle, i hope it's what you are looking for. (Yes, you can change their color too)