在几层DIVS中悬停时调用div

时间：2018-01-22 03:16:28

标签： javascript css

我在导航栏上工作，会在悬停时显示div。如果DIV属于同一个DIV，我很熟悉DIV，但如果它不在原DIV之内且在DIV层内，我就无法理解如何调用DIV。

我还在练习，并试图了解导航栏在本网站上的运作方式。我怎样才能在CSS中纯粹编写代码。 https://www.onupkeep.com/

＆＃13;
＆＃13; 
<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>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

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

但是，我仍然会为您提供代码。

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

在下面的代码段中，我已经做到了：

  1. 当您将鼠标悬停在导航栏菜单上时，它会显示导航栏选项。
  2. 当您从此区域移除鼠标时，它将使导航栏删除。

    3. 问题：导航栏选项的值为position: absolute这一事实将其置于navbarmenu之上，因此当它显示时，会经历一个显示和隐藏的循环。

    如果你希望在navbaroption上有一个花哨的下拉动画或任何进一步的帮助，那么首先需要修复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>

相关问题
最新问题