Question

我需要找到一种方法来设置下拉列表按钮的样式，在我通过点击它聚焦后变成红色。无论是在引导程序中还是在JavaScript中完成，我都需要知道。主要问题是，每次我点击导航栏上的下拉列表按钮时，它都默认为黑色，我试图在引导程序，JavaScript和其他方法中更改它，但我老实说没有运气。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" runat="server" href="~/Default.aspx" style="text-align: left; width: 94px; margin-right: 70px;">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/icons/FCOTICON.png" Height="55px" Width="110px" /></a>
            <a class="navbar-brand" runat="server" href="~/Resources/aspx">Resources</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown" style="background-color:red;">
                    <a href="#" class="dropdown-toggle, navText" data-toggle="dropdown"  role="button" aria-expanded="true" style="color: #2A4B7B;">Apps<span class="caret"></span></a>
                     <ul class="dropdown-menu" role="menu" style="overflow-y: scroll;">
                         <li><a href="">Cisco Wireless</a></li>
                         <li class="divider"></li>
                         <li><a href="">DMS</a></li>
                         <li class="divider"></li>
                     </ul>
                 </li>
             </ul>
         </div>
     </div>
 </div>

以下两张图片可以更好地解释我的问题。

第一张图片是在我点击它之前，我的鼠标只悬停在按钮上。我不希望按钮变成红色，但只有在点击它之后才会关注它。

Before Click

第二张图片是在我点击它后，当颜色默认为黑色时。

After Click

Answer 1

Bootstrap覆盖了你的风格。

在您的site.css中，输入：

.navbar-inverse .navbar-nav > li,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: red;
}

确保site.css文件位于_Layout.cshtml文件中的bootstrap.css文件之后。

单击后将导航栏下拉列表按钮更改为红色

1 个答案: