Can we make an element (div) transparent to mouse events? [duplicate]

Question

I want to make an element transparent to events. If I click on it, the element just behind to it get fired that event.

Answer 1

Use the pointer-events CSS property :

myElement {     pointer-events: none; } 

Do note browser compatibility: http://caniuse.com/#feat=pointer-events

Answer 2

Yes. Set pointer-events:none; on the element above.

Here's a simple example: When I click on the image the select element opens:

div {      width: 14px;      height: 14px;      position:relative;      top: -18px;      left: 58px;      pointer-events: none;      background: url(http://lorempixel.com/14/14) no-repeat;  }

<select>    <option value="value1">Value 1</option>     <option value="value2" selected>Value 2</option>  </select>  <div></div>

Browser support is good (caniuse): except for IE - where it is only supported in IE11