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

    CSS Howto..

    How Do I Add CSS Class to body Element in Meteor?

    Bootstrap dropdown div not showing in non-collapsed view

    how to align all text on left side and image on right size

    how can I make my navbar scroll smoothly to the top on page click

    how to replace url in css using regexp (javascript)

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How to give priority to a div in terms of overlapping divs on a drop down menu?

    css how to increase the size of rounded image button with varying text

    How slow is * css selector for mobile browsers?

    How to use background css for an image not in the Content or Resource folder

    How can I make clickable list with sublinks ?

    JS/CSS: How to change z-index value after scrolling down past 1200 pixels (in height)?

    How to apply page css to a polymer component

    How to detect redraw rate (fps) of a css animation?

    jQuery UI Droppable - How to allow only 1 element per drop zone, instead of stacking

    why there is opacity on image how to put no opacity on image and put hover function on div?

    How to create a pixel perfect divider using css border [closed]

    How to select a .list-cell, in javaFX CSS

    How to serve static files for local development in Django 1.4

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to transform an image in SVG (or CSS) into a non-parallelogram shape?

    How to center list of links in a straight line. CSS

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to resize DIV to less than its initial width & height?

    How to include all css kept in a direcotry?

    How to move full size image slider horizontally using jquery

    CSS: how to make the font icon and text under it closer?

    How to hide class=“” CSS

    SVG + CSS - how to include in HTML and scale & color?

    How to add class to column of grid with angular-ui-grid?