【发布时间】：2019-01-08 01:46:56
【问题描述】：
我正在尝试为侧边栏添加悬停效果。当用户悬停在侧边栏上时，它应该调用 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");
}
【问题讨论】：
-
一个
<ul>元素应该只有<li>元素作为子元素，但你有一些<div>元素。解决此问题可能无法解决您的问题，但会使问题更易于诊断。
标签： javascript html css bootstrap-4