I want the <div class="global-tab"> to popup when i hover over the global <li>

Question

I want the <div class="global-tab"> to popup when i hover over the global <li>

 var tabStatus = 1; function globalTab() { if (tabStatus == 1) { document.getElementById ('div-global-tab').style.display = 'block' tabStatus = 0; } else if (tabStatus == 0) { document.getElementById ('div-global-tab').style.display = 'none' tabStatus = 1; } }

 .div-global-tab{ display: none; }

 <li><a href="#" onmouseover="globalTab()">Global</a> <div class="div-global-tab"> <ul> <li><a href="#">North America</a></li> <li><a href="#">Europe</a></li> <li><a href="#">South America</a></li> <li><a href="#">Asia</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Climate Change</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Global Disasters</a></li> <li><a href="#">The Future</a></li> <br> <li><a href="#">Other</a></li> </ul> </div> </li>

When I hover over "Global", I want the div with the class of "div-global-tab" to popup, idk why it doesn't work

Answer 1

You have no element with an id of global-tab-div .

That being said, you can achieve this with CSS alone:

 #global-tab-div { display: none; } .global:hover #global-tab-div { display: block; }

 <li class="global"><a href="#">Global</a> <div id="global-tab-div"> <ul> <li><a href="#">North America</a></li> <li><a href="#">Europe</a></li> <li><a href="#">South America</a></li> <li><a href="#">Asia</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Climate Change</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Global Disasters</a></li> <li><a href="#">The Future</a></li> <br> <li><a href="#">Other</a></li> </ul> </div> </li>

Answer 2

Here is my solution

<a href="#" onmouseover="globalTab()" onmouseout="globalTab()">Global</a>
  <div id="global-tab-div" class="global-tab-div">
    <ul>
      <li><a href="#">North America</a></li>
      <li><a href="#">Europe</a></li>
      <li><a href="#">South America</a></li>
      <li><a href="#">Asia</a></li>
      <li><a href="#">Africa</a></li>
      <li><a href="#">Climate Change</a></li>
      <li><a href="#">Nature</a></li>
      <li><a href="#">Global Disasters</a></li>
      <li><a href="#">The Future</a></li>
      <br>
      <li><a href="#">Other</a></li>
    </ul>
  </div>

function globalTab() {
  document.getElementById('global-tab-div').classList.toggle("global-tab-div");
}