Passing mouse events to elements below in HTML

Question

I have several elements below one transparent element(it has some things in it that are visible though). But it seems the padding is not allowing the mouse events through. I have it so when the mouse hovers over one of the lower elements, it changes color, then when it leaves, it slowly turns back to its original color. But for the areas where the element above it covers them, the hover doesn't go through. Does anyone know how to get those events to pass through to lower elements?

Here is my slimmed down code. The grid boxes are made whenever the page resizes so they always fill up the background. Things like <div id="content"> are in front of the background despite being transparent. So the boxes are visible but you can't interact with them.

HTML

<body> <div id="background"> <canvas class="gridBox" id="grid1x1"></canvas> <canvas class="gridBox" id="grid2x1"></canvas> <canvas class="gridBox" id="grid3x1"></canvas> ... <canvas class="gridBox" id="grid18x8"></canvas> </div> <div id="header"> <p id="logo"><img src="img/logo.png"></p> </div> <div id="content"> <p>Nothing here yet</p> </div> <div id="footer"> </div> </body>

CSS

body,html{ padding:0; margin:0; } #background{ padding:0; margin:0; width:110%; height:100%; z-index:-1; position:fixed; top:0; left:0; overflow:visible; line-height: 0; } .gridBox{ margin:0; padding:0; height:50px; width:50px; border:1px solid #000000; background:black; transition:background-color 1s linear; } .gridBox:hover{ background-color:green; transition:background-color 0s linear; }

Its little difficult to understand what you are asking..Can you please explain on which element you are hovering and hover does not take place.. — Sachin Jain
– Sachin Jain, Commented Apr 10, 2013 at 16:18
Of course, the gridBox is supposed to go under an animation(they are the canvas tags). But the elements that are declared later are infront because of the z-index change to the grid box. Because of this, when the mouse is in the #content div for example, that is in front of the canvas tag and as a result the canvas tag does not animate. — SalmonMode
– SalmonMode, Commented Apr 10, 2013 at 17:36

Timothy Smith · Accepted Answer · 2013-12-24 05:32:26Z

Try pointer-events: none; in the CSS. The #content element will no longer detect the mouse, but the boxes below will detect it.

#content { pointer-events: none; }

Collectives™ on Stack Overflow

Passing mouse events to elements below in HTML

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related