我创建了一个图像映射(我知道，老派。这是我最好的选择(，我希望当我用鼠标悬停时不透明度发生变化。我不知道如何使用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- 指定诸如background、opacity或border之类的属性对我无法产生任何影响。
您可以将光标更改为具有 Alpha 通道透明效果的图像以实现外观更改，但它会随光标移动。
一种可能的解决方法是将内容元素放在图像前面，将不透明度设置为零(或完全裁剪(，并关闭元素的指针事件，以便它们传递到 MAP 元素。然后在 JavaScript 流程 AREAmouseover并mouseout事件以揭示不可见覆盖的部分。(我想到使用带有程序控制的剪辑区域的 SVG 叠加层，并带有可选的不透明度过渡(
AREA 元素鼠标事件冒泡到MAP元素，因此您可以将mouseover和mouseout事件侦听器添加到 MAP 以进行事件委派。