title: Cursor won't change when mousing over element
body: <p>I have a "menu_toggle" div that should change the mouse cursor when I mouse over it. Usually this is relatively simple however when I add cursor:pointer; to my CSS it does not work. I have tried changing its Z-index so that it is on top but this has not fixed the issue.</p>
  
  <p>I will include code snippets below. Any suggestions are welcome. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#navbar {
      position:absolute;
      width: 100%;
      height: 75px;
      background-color: rgba(0,0,0,0.6);
      z-index: 10;
  }
  #navbar_content {
      display: flex;
      align-items: centre;
      height: 100%;
      width: 95%;
  }
  #logo {
      align-self: center;
      margin: auto;
      width: 64px;
      height: 64px;
  }
  #logo img {
      max-height: 64px;
  }
  #menu_toggle {
      align-self: center;
      display: block;
      width: 64px;
      height: 64px;
      margin-left: 2%;
      z-index: -1;
  }
  #slideoutmenu {
      display: none;
      position: fixed;
      text-align: left;
      left: 0;
      margin-top: 5px;
      width: 250px;
      height: 500px;
      background: rgba(0,0,0,0.6);
      color: white;
      font-family: "Liberation Sans", sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"/&gt;
          &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
          &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="navbar"&gt;
              &lt;div id="navbar_content"&gt;
                  &lt;div id="menu_toggle"&gt;&lt;img style="max-height: 64px;" src="images/menu_icon.png"/&gt;&lt;/div&gt;
                  &lt;div id="slideoutmenu"&gt;
                      &lt;br&gt;
                      &lt;br&gt;
                      &lt;br&gt;
                      &lt;br&gt;
                      &lt;br&gt;    
                      &lt;ul&gt;
                          &lt;li&gt;Design&lt;/li&gt;
                          &lt;li&gt;Development&lt;/li&gt;
                          &lt;li&gt;See My Work&lt;/li&gt;
                          &lt;li&gt;About Me&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div id="logo"&gt;
                      &lt;img src="images/logo.png"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>