在引导导航栏中,当导航链接各自的下拉菜单被打开或下拉菜单链接被悬停时,如何使导航链接激活(只需改变导航链接的bg颜色)?我尝试了以下代码
null
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
});
.navbar-nav li a{
color: #000;
text-transform: uppercase;
padding: 13px 10px;
text-align: center;
}
.navbar-nav li a:hover{
background-color: #238500;
color: #fff;
}
.dropdown-menu li a{
font-weight: normal !important;
padding: 15px !important;
color: #fff !important;
text-transform: capitalize !important;
text-align: left !important;
}
ul.dropdown-menu li a:hover{
background-color: #3c3c3c;
color: #fff;
background-image: none;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
background-image: none;
}
ul.dropdown-menu li a:hover > .navbar-nav li a{
background-color: #238500 !important;
}
.dropdown-menu{
background-color: #238500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Education</a>
<ul class="dropdown-menu">
<li><a href="#">Goals and Objectives</a></li>
<li><a href="#">Governing priciples</a></li>
<li><a href="#">Board of directors</a></li>
</ul>
</li>
</ul>
null
试试看:
null
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50);
$(this).addClass("hover");
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
$(this).removeClass("hover");
});
.navbar-nav li a{
color: #000;
text-transform: uppercase;
padding: 13px 10px;
text-align: center;
}
.navbar-nav li a:hover{
background-color: #238500;
color: #fff;
}
.dropdown-menu li a{
font-weight: normal !important;
padding: 15px !important;
color: #fff !important;
text-transform: capitalize !important;
text-align: left !important;
}
ul.dropdown-menu li a:hover{
background-color: #3c3c3c;
color: #fff;
background-image: none;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
background-image: none;
}
ul.dropdown-menu li a:hover > .navbar-nav li a{
background-color: #238500 !important;
}
.dropdown-menu{
background-color: #238500;
}
.hover {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Education</a>
<ul class="dropdown-menu">
<li><a href="#">Goals and Objectives</a></li>
<li><a href="#">Governing priciples</a></li>
<li><a href="#">Board of directors</a></li>
</ul>
</li>
</ul>