Javascript onmouseover 和 onmouseout 同时被调用

Question

I'm trying to add a hover effect for my sidebar.我正在尝试为侧边栏添加悬停效果。 When the user hovers on the sidebar it should call the onmouseover function and when the user hovers out of the sidebar it should call the onmouseout function.当用户悬停在侧边栏上时，它应该调用 onmouseover 函数，当用户悬停在侧边栏之外时，它应该调用 onmouseout 函数。

However, I noticed that both functions are being called at the same time.但是，我注意到这两个函数同时被调用。 Even if the user is hovering over the sidebar and clicks on the dropdown and scrolls through the individual list items within the sidebar, the onmouseout function is being called and the onmouseover.即使用户将鼠标悬停在侧边栏上并单击下拉列表并滚动侧栏中的单个列表项，也会调用 onmouseout 函数和 onmouseover。

How do I only call the onmouseover function when it is inside the sidebar only ?我如何只在侧边栏内调用 onmouseover 函数？

https://jsfiddle.net/bc6m3Lte/ https://jsfiddle.net/bc6m3Lte/

<body>

  <ul id="sidebar" class="nav flex-column" onmouseover="HoverOpenSideBar()" onmouseout="HoverCloseSideBar()">

    <div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex" >
      <span id="sidelogo" class="mr-auto p-2">Logo</span>
      <button type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()" >
        <span class="fas fa-align-justify" aria-hidden="true"></span>
      </button>
    </div>


    <li id="list1" class="nav-item ">
      <a id="toggleDropDown" class="nav-link active px-0 " data-toggle="collapse"  href="#submenu1" aria-expanded="false">
        <div id="list2" class=" d-flex  align-items-center ">
          <span id="list3" class=" pl-3 fas fa-comment-dots"></span>
          <span class="list4 ml-3 text-nowrap">Dashboard one</span>
          <span class="fas fa-angle-right ml-3"></span>

        </div>

      </a>
    </li>

     <!-- Submenu content -->
     <div id='submenu1' class="collapse" >
      <a href="#" class="list-group-item list-group-item-action py-1">
        <div id="abcd" class="d-flex align-items-center pl-2 " >
          <span class="fas fa-circle"></span>
          <span class="menu-collapsed ml-2">Charts</span>
        </div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-1">
          <div id="abcd" class="d-flex align-items-center pl-2 " >
              <span class="fas fa-circle"></span>
              <span class="menu-collapsed ml-2">Charts</span>
            </div>
      </a>
      <a href="#" class="list-group-item list-group-item-action py-1">
          <div id="abcd" class="d-flex align-items-center pl-2 " >
              <span class="fas fa-circle"></span>
              <span class="menu-collapsed ml-2">Charts</span>
          </div>
      </a>
    </div>


  </ul>

  <nav id="topbar" class="navbar navbar-dark bg-dark Max-width 100%">
    <a class="navbar-brand" href="#">Navbar</a>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>

      </ul>
    </div>
  </nav>

  <div id="main">
    <h2>Sidenav Push Example</h2>
    <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  </div>
  </div>
</body>

Javascript Javascript

function HoverOpenSideBar() {
    console.log("In Hover OPEN sidebar");
}

function HoverCloseSideBar() {
    console.log("In Hover OUT sidebar");

}

Answer 1

使用onmouseenter和onmouseleave而不是 onmouseover 和 onmouseout。

 <ul id="sidebar" class="nav flex-column" onmouseenter="HoverOpenSideBar()" onmouseleave="HoverCloseSideBar()">

Javascript onmouseover 和 onmouseout 同时被调用

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-01-08 01:59:50

Javascript onmouseover 和 onmouseout 同时被调用

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-08 01:59:50

解决方案1
0 已采纳 2019-01-08 01:59:50