title: Passing mouse events to elements below in HTML
body: <p>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?</p>
  
  <p>Here is my slimmed down code. The grid boxes are made whenever the page resizes so they always fill up the background. Things like <code>&lt;div id="content"&gt;</code> are in front of the background despite being transparent. So the boxes are visible but you can't interact with them.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="background"&gt;
      &lt;canvas class="gridBox" id="grid1x1"&gt;&lt;/canvas&gt;
      &lt;canvas class="gridBox" id="grid2x1"&gt;&lt;/canvas&gt;
      &lt;canvas class="gridBox" id="grid3x1"&gt;&lt;/canvas&gt;
      ...
      &lt;canvas class="gridBox" id="grid18x8"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;div id="header"&gt;
      &lt;p id="logo"&gt;&lt;img src="img/logo.png"&gt;&lt;/p&gt;
  &lt;/div&gt;  
  &lt;div id="content"&gt;
      &lt;p&gt;Nothing here yet&lt;/p&gt;
  &lt;/div&gt;  
  &lt;div id="footer"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;
  }
  </code></pre>