Question

我试图在导航选项卡打开时更改其下拉菜单的颜色（在这种情况下为蓝色和红色），但是当我放开鼠标时，它又变回白色。当下拉菜单显示为白色而变为蓝色时，我将如何处理？如果有人可以帮忙，我的代码如下。

我的HTML

<ul class="nav nav-tabs nav-justified">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>
        <div class="dropdown-menu dropdown-menu-center">
            <a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>
            <a class="dropdown-item" href="#programming-lab">Programming Lab</a>
            <a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>
        </div>
    </li>
</ul>

我的CSS：

.dropdown-menu {
    background-color: var(--dark-gray);
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

.dropdown-item:hover {
    background-color: var(--gray);
}

.dropdown-toggle.active {
    background-color: blue;
}

.dropdown-toggle:active, .open .dropdown-toggle {
    background-color: blue !important;
    color: red !important;
}

Answer 1

使用:focus

.dropdown-toggle:focus{...}

.dropdown-menu {
    background-color: var(--dark-gray);
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}

.dropdown-item:hover {
    background-color: var(--gray);
}

.dropdown-toggle.active {
    background-color: blue;
}

.dropdown-toggle:active, .open .dropdown-toggle,.dropdown-toggle:focus {
    background-color: blue !important;
    color: red !important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs nav-justified">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>
        <div class="dropdown-menu dropdown-menu-center">
            <a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>
            <a class="dropdown-item" href="#programming-lab">Programming Lab</a>
            <a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>
        </div>
    </li>
</ul>

打开时的Bootstrap 4导航选项卡下拉菜单颜色

1 个答案: