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");
}
` element is only supposed to have `- ` elements as children, but you have some `
` elements. Fixing this may not solve your problem, but it will make the problem easier to diagnose.
– RobertAKARobin Jan 08 '19 at 01:54