HTML5 CSS(如何悬停图像忽略透明)

时间:2014-08-11 15:16:02

标签: javascript css html5 canvas

我有两张照片;一个在另一个之上:

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

我需要标记三角形但是标记锚点因为鼠标在锚点透明的地方(如何忽略它??)

1 个答案:

答案 0 :(得分:2)

首先,将您的样式移出内联 - 然后您可以将三角形的z-index设置为大于锚点的:hover,这样它就会显示为&#39;在顶部,同时使用专门链接到三角形的#triangle选择器(如果您希望它与两者相关,请删除#triangle { position: absolute; top: -50px; left: -70px; z-index:1; } #triangle:hover{ background:blue; } #anchor { position: absolute; top: 20px; left: 20px; z-index:0; } ):

Demo Fiddle

{{1}}