HTML5 CSS (How to on hover image ignore transparent)

Tags: javascript,css,html5,canvas

Problem :

I have two images; one is on top of another:

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

I need mark triangle but marked anchor because mouse on anchor transparent place (how to ignore it..?)

---

Solution :

Firstly, move your styles out of inline- then you can set the z-index of the triangle to be greater than that of the anchor, so it 'appears' on top, whilst using the :hover selector specifically linked to the triangle (remove #triangle if you want it to relate to both):

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;
}