如何在每个地图区域的不同颜色的地图区域上添加悬停效果？

Question

我已经使用在线工具创建了图像地图。现在，我希望在每个地图区域具有特定颜色的地图区域上具有悬停效果。怎么做

我已经尝试过此答案（How to apply Hovering on html area tag?）。我还尝试了一些jQuery插件，例如Mapoid和Maplight

<img src="Untitled.png" usemap="#image-map">

<map name="image-map">
    <area class="{fillColor:'0000ff'}" target="" alt="" title="" href="" 
        coords="334,89,1031,273" shape="rect">
    <area class="{fillColor:'00ff00'}" target="" alt="" title="" href="" 
        coords="334,277,1031,417" shape="rect">
</map>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="maphilight/jquery.maphilight.min.js"></script>

<script type="text/javascript">
    $('img[usemap]').maphilight();
</script>

我希望每个地图区域具有不同的悬停颜色，但所有地图区域都具有相同的颜色