Javascript onmouseover and onmouseout getting called at the same time

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.

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.

How do I only call the onmouseover function when it is inside the sidebar only ?

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");

}

Answer 1

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

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

Javascript onmouseover and onmouseout getting called at the same time

Question

1 answers

solution1
0 ACCPTED 2019-01-08 01:59:50

Javascript onmouseover and onmouseout getting called at the same time

Question

1 answers

solution1 0 ACCPTED 2019-01-08 01:59:50

solution1
0 ACCPTED 2019-01-08 01:59:50