Question

我正在尝试为侧边栏添加悬停效果。当用户将鼠标悬停在侧边栏上时，应调用onmouseover函数；当用户将鼠标悬停在侧边栏上时，应调用onmouseout函数。

但是，我注意到两个函数被同时调用。即使用户将鼠标悬停在侧边栏上并单击下拉列表并在侧边栏中滚动浏览各个列表项，也会调用onmouseout函数并进行onmouseover。

如何仅在侧边栏内调用onmouseover函数？

<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

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

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

  }

Answer 1

使用onmouseenter和onmouseleave代替onmouseover和onmouseout。

measurement

javascript onmouseover和onmouseout同时被调用

1 个答案: