CODEWITHSUNDEEP
javascripthtmlcss
SalmonMode
SalmonMode

Reputation: 269

Passing mouse events to elements below in HTML

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;
}

Upvotes: 2

Views: 2221

Answers (1)

Timothy Smith
Timothy Smith

Reputation: 848

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;
}

Upvotes: 4

Related Questions