Javascript 如何将鼠标悬停在图像元素上时标记为活动（非空[透明]区域）

图像是四边形的（你们可以在边框上看到），我只需要在悬停在图像元素上时将其标记为活动元素，现在当我在三角形附近的空白处移动时，它是活动的，等等

我的问题：我需要一个地方

jsfiddle：

---

您可以将两个图像包装在一个div中，当用户将鼠标悬停在div上时，您可以设置所需图像的值，如下所示：

HTML

<div id="hoverArea"><img src='http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/3d-transparent-glass-icons-media/001429-3d-transparent-glass-icon-media-a-media21-arrow-back.png' style='position: absolute; top: -50px; left: -70px'>
<img src='http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/3d-transparent-glass-icons-transport-travel/036411-3d-transparent-glass-icon-transport-travel-anchor6-sc48.png' style='position: absolute; top: 20px; left: 20px' class="canHaveBlueBackground"></div>

---

如果我理解您的问题，您只希望图像的锚定部分可以单击。你可能想调查一下。

<div id="hoverArea"><img src='http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/3d-transparent-glass-icons-media/001429-3d-transparent-glass-icon-media-a-media21-arrow-back.png' style='position: absolute; top: -50px; left: -70px'>
<img src='http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/3d-transparent-glass-icons-transport-travel/036411-3d-transparent-glass-icon-transport-travel-anchor6-sc48.png' style='position: absolute; top: 20px; left: 20px' class="canHaveBlueBackground"></div>

div#hoverArea:hover .canHaveBlueBackground {
  background: blue;  
}