I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

• javascript
• jquery
• html
• css

• But it's really necessary to click beneath the image? Why will you use it? – gioNicol Commented Aug 25, 2015 at 18:00
• Does the image have to be in front of the div? The div would have to be on top, using z-index with a position noted in the css. – Georgette Pincin Commented Aug 25, 2015 at 18:00
• 1 Yeah, something's odd about your setup. What is the purpose of the smiley? Would it be better to just make the smiley a background image of the div or to put it inside the div? You can always use jQuery next() or closest() to acplish this, but I have a feeling that there's something off about the markup setup. – Gene Parcellano Commented Aug 25, 2015 at 18:03

2 Answers 2

You have to use CSS pointer-events property. Just add to img styles:

pointer-events: none;

EDIT: I'm sorry, I made a mistake, it has very good support! Can I use

Assign an id to your image:

<img id='image' src="smiley.gif" style="z-index: 2; width:200px; height 200px;">

and use click event on image to do whatever you want to do with your div

$('#image').click(function(){
    //perform tasks on your div here
    $('#theDiv').css('background-color', '#fff'); 
});