簡體   English   中英

Javascript onmouseover 和 onmouseout 同時被調用

[英]Javascript onmouseover and onmouseout getting called at the same time

我正在嘗試為側邊欄添加懸停效果。 當用戶懸停在側邊欄上時,它應該調用 onmouseover 函數,當用戶懸停在側邊欄之外時,它應該調用 onmouseout 函數。

但是,我注意到這兩個函數同時被調用。 即使用戶將鼠標懸停在側邊欄上並單擊下拉列表並滾動側欄中的單個列表項,也會調用 onmouseout 函數和 onmouseover。

我如何只在側邊欄內調用 onmouseover 函數?

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

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

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

}

使用onmouseenteronmouseleave而不是 onmouseover 和 onmouseout。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM