我创建了图像地图（我知道是旧学校。这是我最好的选择），我希望在用鼠标悬停时改变不透明度。我不知道如何用JS实现这一目标，有人可以帮我吗？我的地图代码如下。
<html>
<img src="img" usemap="#image-map">
<map name="image-map">
<area target="" alt="tools" title="tools" href="https://datascience.nih.gov/tools-and-analytics" coords="91,61,164,160,156,182,41,218,37,204,34,186,35,167,36,149,41,131,49,112,63,89,79,71" shape="poly">
<area target="" alt="comm" title="comm" href="https://datascience.nih.gov/community-engagement" coords="95,60,108,52,124,43,142,38,167,34,189,33,211,38,230,44,247,51,260,60,190,159,165,160" shape="poly">
<area target="" alt="work" title="work" href="https://datascience.nih.gov/workforce-development" coords="263,62,274,72,286,84,297,100,307,117,316,143,319,167,319,186,317,205,313,219,198,183,191,159" shape="poly">
<area target="" alt="eco" title="eco" href="https://datascience.nih.gov/data-ecosystem" coords="312,223,306,237,297,253,288,266,272,284,251,299,234,309,220,314,201,318,180,321,178,198,198,185" shape="poly">
<area target="" alt="infra" title="infra" href="https://datascience.nih.gov/data-infrastructure" coords="175,320,161,319,141,315,126,311,110,304,95,295,83,285,73,275,64,265,57,254,50,242,46,231,42,223,157,184,176,198" shape="poly">
</map>
</html>`
AREA元素定义形状，不包含任何内容。我可以确认他们响应的唯一CSS属性是cursor-指定诸如cursor，background或opacity之类的属性不会产生任何效果。
您可能可以将光标更改为具有alpha通道透明效果的图像，以实现外观的改变，但是它会随光标一起移动。
可能的解决方法是将内容元素放置在图像的前面，将不透明度设置为零（或完全修剪），并关闭该元素的指针事件，以便它们传递到MAP元素。然后在JavaScript中处理区域border和mouseover事件，以显示部分不可见的叠加层。 （我想到了使用带有程序控制的裁剪区域的SVG叠加层，以及可选的不透明度过渡）
AREA元素鼠标事件冒泡到mouseout元素，因此您可以将MAP和mouseover事件侦听器添加到MAP以进行事件委托。