How to work with HTML elements underneath a canvas

I have a container of some HTML divs and with some CSS if I hover over them, the background color changes. I want to overlay a canvas on top of the container so that I can draw lines. The problem is tha开发者_C百科t when the canvas is overlaid, the hovering changes of the divs no longer works. Is there a way to overlay a canvas but still have CSS or JavaScript onmouseover events still work on the elements beneath?

So you want sort of a transparent canvas which passes all mouse events except clicks to the elements behind it?

IMHO, you'd need to use JS for that: Capture all the events on the canvas, then manually pass them on to the div behind the canvas. If you have multiple divs, you'd need some sort of lookup depending on the (x,y) coordinates of the mouse.

An alternative to going through all that hassle would be by using the pointer-events CSS attribute. Mozilla,Webkit and IE6-8(excanvas) all support this. Opera does not, but I really don't care.

<canvas style="pointer-events:none;"></canvas>