当鼠标悬停在图像的特定部分时，我需要制作带有突出显示的响应式图像映射。是否可以仅使用 JavaScript、html 和 CSS 来完成（以及如何）？我在这里找到了一些线程，但仅针对具有响应式图像映射的部分，并且它们使用了一些 jQuery 插件。请帮助:)
我使用了 image-map.net 但这并没有解决问题。
HTML代码：
<body>
<section>
<div>
<img id="Image-Maps-Com-image-maps-2023-03-03-153207" src="https://www.linkpicture.com/q/A1C-PBOBiFL._AC_SL1500.jpg" width="1396" height="940" orgWidth="1396" orgHeight="940" usemap="#image-maps-2023-03-03-153207" alt="" />
<map name="image-maps-2023-03-03-153207" id="ImageMapsCom-image-maps-2023-03-03-153207">
<area shape="rect" coords="1394,938,1396,940" alt="Image Map" style="outline:none;" title="Image Map" href="brazil.html" />
<area alt="" title="" href="brazil.html" shape="poly" coords="477,473,499,484,509,501,539,513,561,522,551,552,538,590,512,597,478,593,452,600,437,596,428,581,418,571,394,545,384,521,389,501,397,477,401,462,412,449,443,455" style="outline:none;" target="_self"
onmouseover="function highlight(){
'some code here for highlighting'}" />
</map>
</section>
</body>
CSS代码：
* {
box-sizing: border-box;
}
body{
margin: 0;
overflow: hidden;
min-height: 100%;
min-width: 100%;
}
section img{
position: fixed;
flex-shrink: 0;
width: 100vw;
height: 100vh;
}