Menu
I want to make an element transparent to events. If I click on it, the element just behind to it get fired that event.
741
CSS Opacity / TransparencyThe opacity property specifies the opacity/transparency of an element.
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as degree in which light is allowed to travel through an object.
Use the pointer-events CSS property :
myElement { pointer-events: none; } Do note browser compatibility: http://caniuse.com/#feat=pointer-events
135
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
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
