时间戳

首页 > 解决方案 > 为什么 mouseover 和 mouseout 在 javascript 中不能正常工作？

javascript - 为什么 mouseover 和 mouseout 在 javascript 中不能正常工作？

问题描述

我有一个按钮

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

然后我有一个 Lobby()

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

然后我就有了风格

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

我有一个 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>

另一个功能

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

所以当我将鼠标悬停在大厅按钮上时，它应该显示 div。当我从 div 中移除鼠标时，它应该隐藏起来。但是当我悬停Information Center或Product Displaydiv 隐藏时。为什么？

标签： javascripthtmlcss

解决方案

onmouseleave改为使用onmouseout

当鼠标指针离开任何子元素以及被选元素时触发 mouseout 事件。

mouseleave 事件仅在鼠标指针离开所选元素时触发。

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>

推荐阅读