CODEWITHSUNDEEP
javascripthtmlcanvas
roflwaffle
roflwaffle

Reputation: 30646

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 that 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?

Upvotes: 2

Views: 467

Answers (2)

Andrew
Andrew

Reputation: 13853

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>

Upvotes: 0

Mononofu
Mononofu

Reputation: 902

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.

Upvotes: 3

Related Questions