javascript - 在 DIVS 的几层内悬停时调用 div

Question

我正在开发一个在悬停时会显示 div 的导航栏。如果它在同一个 DIV 中，我很熟悉调用 DIV，但如果它在原始 DIV 之外和 DIV 的层内，我无法理解如何调用 DIV。

我仍在练习并试图了解导航栏在此网站上的工作原理。我怎样才能纯粹用 CSS 编写代码。 https://www.onupkeep.com/

body { 
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color: gray;
}
ul, li, ol {
	list-style-type: none;
}
.logo {
	content: url("../img/logo.jpg");
	margin-top: 25px;
	margin-left: 30px;
}
.d1navwrpr {
	width: 100%;
	height: auto;
}
.navbar {
	width: 100%;
	height: auto;
	padding-bottom: 1px;
}

.navbar1 {
	width: 100%;
}

.logoimg {
	display: block;
	width: 10%;
	float: left;
}

.navbarmenu {
	width: 60%;
	display: block;
	float: left;
}

.loginbts{
	width:270px;
	float: right;
	padding: 20px 0px 30px 0;
}

.login {
	display: block;
	color:black;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 25px;
	padding-right: 25px;
	float:left;
}
.signup {
	color: white;
	font-weight: bold;
	background-color: #ff3b30;
	border-style: solid;
	border-color: #ff3b30;
	border-width: 2px;
	border-radius: 45px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 25px;
	padding-right: 25px;
	float: left;
}

.pbold {
	color: black;
	font-weight: bold;
	float: left;
	padding: 30px 50px 30px 50px;
}
.navbaroption {
	padding-left: 200px;
	width: 100%;
	height: auto;
	display: none;
	position: absolute;
	padding-bottom: 20px;
	z-index: 1;	
	top: 104;
}
.navbarmenu li a:hover .navbaroption{
	display: block;
}


.navbaroption li a:hover, .navbarmenu li a:hover {
	color: #ff3b30;
}

.option1 {
	float: left;
}

.option1 li {
	padding: 5px;
	font-weight: bold;
}

.navbaroption {
	display: noe;
	background-color: white;
}

.navbarmenu li a:hover {
	display: block;
}

.mpwrpr {
	width: 100%;
	padding: 0;
	margin: 0;
}

<div class="d1navwrpr"><!--HeaderNav-->
	
<div class="navbar">
	<div class="logoimg">
	<img class="logo"></div>

	<div class="navbarmenu">
	<ul>
		<li><a class="pbold">Platform</a></li>
		<li><a class="pbold">Pricing</a></li>
		<li><a class="pbold">Support</a></li>
		<li><a class="pbold">Company</a></li>
	</ul></div>

		<div class="loginbts">
		<ul>
		<li><a href="#" class="login">Login</a></li>
		<li><a href="mainpage.html" class="signup">Sign Up</a></li>
	</ul>
</div>
	</div>
</div>
	

	

	<div class="navbaroption">

			<div class="option1">
			<ul>
				<li><a href="#">Nav 1</a></li>
				<li><a href="#">Nav 2</a></li>
				<li><a href="#">Nav 3</a></li>
				<li><a href="#">Nav 4</a></li>
				<li><a href="#">Nav 5</a></li>
			</ul></div>

			<div class="option1">
			<ul>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
			</ul></div>

			<div class="option1">
			<ul>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
			</ul></div>
		
			<div class="option1">
			<ul>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
				<li><a href="#">Option</a></li>
			</ul></div>

		
	</div>
</div>

Answer 1

我真的无法弄清楚为什么您将 position: absolute 的值分配给您的“navbaroption”div，因为它会导致问题。

但是，尽管如此，我仍会为您提供代码。

然而，您的 CSS 确实需要进行一些编辑才能正确放置该导航栏。

在下面的代码片段中，我这样做是为了:

1. 当您将鼠标悬停在导航栏菜单上时，它会显示导航栏选项。
2. 当您从该区域移开鼠标时，导航栏选项就会消失。

问题:事实上，您的导航栏选项的值为 position: absolute 将其置于导航栏菜单之上，因此当它显示时，它会不断循环显示和隐藏。

如果您希望在 navbar 选项上有一个精美的下拉动画或任何进一步的帮助，则需要先修复 CSS，这样它才能真正正常运行。

$(document).ready(function(){
  $(".navbaroption").hide();
/* Beginning of Script */
    $(".navbarmenu").mouseenter(function(){
        $(".navbaroption").show();
    });
    $(".navbarmenu").mouseleave(function(){
        $(".navbaroption").hide();
    });
});

body { 
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	color: gray;
}
ul, li, ol {
	list-style-type: none;
}
.logo {
	content: url("logo.jpg");
	margin-top: 25px;
	margin-left: 30px;
}
.d1navwrpr {
	width: 100%;
	height: auto;
}
.navbar {
	width: 100%;
	height: auto;
	padding-bottom: 1px;
}

.navbar1 {
	width: 100%;
}

.logoimg {
	display: block;
	width: 10%;
	float: left;
}

.navbarmenu {
	width: 60%;
	display: block;
	float: left;
}

.loginbts{
	width:270px;
	float: right;
	padding: 20px 0px 30px 0;
}

.login {
	display: block;
	color:black;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 25px;
	padding-right: 25px;
	float:left;
}
.signup {
	color: white;
	font-weight: bold;
	background-color: #ff3b30;
	border-style: solid;
	border-color: #ff3b30;
	border-width: 2px;
	border-radius: 45px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 25px;
	padding-right: 25px;
	float: left;
}

.pbold {
	color: black;
	font-weight: bold;
	float: left;
	padding: 30px 50px 30px 50px;
}
.navbaroption {
	padding-left: 200px;
	width: 100%;
	height: auto;
	display: none;
	position: absolute;
	padding-bottom: 20px;
	z-index: 1;	
	top: 104;
}


.navbaroption li a:hover, .pbold:hover {
	color: #ff3b30;
}

.option {
	float: left;
}

.option li {
	padding: 5px;
	font-weight: bold;
}

.navbaroption {
	display: block;
	background-color: black;
}

.pbold:hover {
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="d1navwrpr"><!--HeaderNav-->
	
<div class="navbar">
	<div class="logoimg">
	<img class="logo"></div>

	<div class="navbarmenu">
	<ul>
		<li><a class="pbold">Nav1</a></li>
		<li><a class="pbold">Nav2</a></li>
		<li><a class="pbold">Nav3</a></li>
		<li><a class="pbold">Nav4</a></li>
	</ul></div>

		<div class="loginbts">
		<ul>
		<li><a href="#" class="login">Login</a></li>
		<li><a href="mainpage.html" class="signup">Sign Up</a></li>
	</ul>
</div>
	</div>
</div>
	

	

	<div class="navbaroption">

			<div class="option">
			<ul>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
			</ul></div>

			<div class="option">
			<ul>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
			</ul></div>

			<div class="option">
			<ul>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
			</ul></div>
		
			<div class="option">
			<ul>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option</a></li>
				<li><a href="#">option/a></li>
				<li><a href="#">option</a></li>
			</ul></div>

		
	</div>
</div>


</body>