HTML5 CSS（如何在悬停图像上忽略透明）

Question

我有两张图片；一个在另一个之上：

HTML：

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

CSS：

img:hover {
    background: blue;  
}

Example Fiddle

我需要标记三角形但标记锚点，因为鼠标在锚点透明位置（如何忽略它..？）

Answer 1

首先，将您的样式移出内联 - 然后您可以将三角形的 z-index 设置为大于锚点的，因此它“出现”在顶部，同时使用专门链接到的 :hover 选择器三角形（如果您希望它与两者相关，请删除 #triangle）：

Demo Fiddle

#triangle {
    position: absolute;
    top: -50px;
    left: -70px;
    z-index:1;
}
#triangle:hover{
    background:blue;
}
#anchor {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index:0;
}