Make element unclickable (click things behind it)

Question

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).

I want to make that image "unclickable" or "inactive" or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren't there "blocking" the interaction.

Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.

Thanks!

Answer 1

Setting CSS - pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE.

Here's a full list of values pointer-events can take.

Answer 2

CSS Pointer Events is what you want to look at. In your case, set pointer-events to "none". Look at this JSFiddle for an example... http://jsfiddle.net/dppJw/1/

Notice that double clicking on the icon will still say you click the paragraph.

div.child {     ...         background: #fff;     pointer-events: none //This line is the key! }