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?

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?

• javascript

• Why do you have a canvas on top of everything? – MoarCodePlz Commented Jul 28, 2011 at 15:30
• Because I want to do an animation on top of the image(s) that triggers the mouse event – Ricardo Sanchez Commented Jul 28, 2011 at 15:48
• So why not just create a canvas over an image upon a mouse over event? – MoarCodePlz Commented Jul 28, 2011 at 15:54

1 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.