CODEWITHSUNDEEP
javascripthtmlcss
Jamshaid Alam
Jamshaid Alam

Reputation: 527

Why mouseover and mouseout is not working properly in javascript?

I have a button

<button onmouseover="Lobby()" class="menuBtn"> Lobby </button>

then I have a Lobby()

function Lobby()
    {
        document.getElementById("lobby").style.display = "block";
    }

and then I have a style 

#lobby
{
  display: none;
  height: 100%;
  width: 16%;
}

I have a div

<div onmouseout="HideLobby()" class="submenupanel" id="lobby">
        <button onclick="" class="l">Lobby</button>
        <button onclick="GoToHelpDesk()" class="l">Information Center</button>
        <button onclick="ProductDisplay()" class="l">Product Display</button>
    </div>

Another Function 

function HideLobby()
    {
        document.getElementById("lobby").style.display = "none";
    }

So When I hover to Lobby Button its showing div as it should. And when I remove my mouse from div its hiding as it should. But when I hover on Information Center or Product Display div is hiding. Why?

Upvotes: 0

Views: 40

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

Use onmouseleave instead onmouseout

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

The mouseleave event is only triggered when the mouse pointer leaves the selected element.

function Lobby() {
  document.getElementById("lobby").style.display = "block";
}

function HideLobby(event) {
  document.getElementById("lobby").style.display = "none";
}
#lobby {
  display: none;
  height: 100%;
  width: 16%;
}
<button onmouseover="Lobby()" class="menuBtn"> Lobby </button>

<div onmouseleave="HideLobby()" class="submenupanel" id="lobby">
  <button onclick="" class="l">Lobby</button>
  <button onclick="GoToHelpDesk()" class="l">Information Center</button>
  <button onclick="ProductDisplay()" class="l">Product Display</button>
</div>

Upvotes: 2

Related Questions