Is it possible to let mouse events pass through a canvas layer?

Question

I have a grid of images and a canvas layer on top of it, I would like to do some animations on the canvas tag once the user rolls over a thumbnail image from the grid, so I wonder if is possible to let mouse events pass through the canvas layer?

Answer 1

Try this css property on your canvas:

pointer-events: none

http://dev.w3.org/csswg/css3-ui/#pointer-events

It is intended to prevent the element from receiving any mouse events at all. Mozilla seems to believe that the event will pass through to elements behind it like you are hoping.

https://developer.mozilla.org/en/CSS/pointer-events

It looks like this may not be supported in IE and Opera, so you might have to disable your animation in those browsers.