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

Question

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

我的问题：我需要忽略透明度

jsfiddle：http://jsfiddle.net/0vc33e2n/

<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'>

Answer 1

您可以将两个图像包装在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>

<强> CSS

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

http://jsfiddle.net/0vc33e2n/3/