如何在下拉菜單打開時激活鏈接？

Question

在自舉導航欄中，如何導航導航鏈接 （只需更改導航鏈接的bg顏色） 當導航鏈接的相應下拉列表打開時 或下拉菜單鏈接懸停？ 我嘗試下面的代碼

$('ul.nav li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50); 
 
\t }, 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{ 
 
\t background-image: none; 
 
} 
 
ul.dropdown-menu li a:hover > .navbar-nav li a{ 
 
\t 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>

Answer 1

試試這個：

$('ul.nav li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50); 
 
    $(this).addClass("hover"); 
 
\t }, 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{ 
 
\t background-image: none; 
 
} 
 
ul.dropdown-menu li a:hover > .navbar-nav li a{ 
 
\t 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>

Answer 2

按我的理解，是你想要的嗎？

.navbar-nav .open>a, 
.navbar-nav .open>a:focus, 
.navbar-nav .open>a:hover { 
    background-color: #238500 ; 
    color: #fff; 
} 

只需將此樣式添加到您的CSS中即可。