make an object be clickable from behind of another element in html

Question

take look at this:
http://www.templatemonster.com/demo/35403.html

In this template you can click on the image under the man's forearm even over the forearm itself.
The hand is not a part of images. It is three div pieces that has a png image as background.

How is it possible?
How Can I do the same thing (have a div that contains a linked image and have another div on it but the underlying link be clickable)?
Is it cross-browser?

Thanks

score 26 · Accepted Answer · edited Mar 30 '12 at 17:34

26

You could just add pointer-events:none in your stylesheet to the element you're trying to click through

Example here: http://robertnyman.com/css3/pointer-events/pointer-events.html

Check the checkbox to see how the grey box is able to be clicked through.

edited Mar 30 '12 at 17:34

Tim M.

53,671
14
120
163

answered Mar 29 '12 at 21:27

itsbc

520
6
14

this is the kind of nonsense that makes me think "damn those developers of the browsers are so smart" – paviktherin Aug 18 '17 at 19:38

score 4 · Answer 2 · answered Mar 29 '12 at 21:33

4

it's made with

pointer-events:none;

it don't works in IE and Opera, but that is in this case not really a problem. It just don't work over the arm itself.

answered Mar 29 '12 at 21:33

Sven Bieder

5,515
2
21
27

score 1 · Answer 3 · edited May 23 '17 at 12:34

1

In modern browsers you can use the pointer-events css3 property. Here is a famous question about this : Click through a DIV to underlying elements

edited May 23 '17 at 12:34

Community

1
1

answered Mar 29 '12 at 21:28

olivieradam666

4,522
2
20
25

make an object be clickable from behind of another element in html

3 Answers3