Question

当我单击下拉列表时，我想更改其背景颜色。悬停效果很好，但主动/对焦不起作用。我在导航栏中使用了此功能。

.btn-danger {
  background-color: #800080;
}

.dropdown-menu {
  background-color: #800080;
}

.btn-danger:hover {
  background-color: #17a2b8;
}

.btn-danger:active {
  background-color: yellow;
}

.btn-danger:focus {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Portfolio<span class="caret"></span>
        <ul class="dropdown-menu">
            <li><a href="https://www.jquery-az.com/">PS</a></li>
            <li><a href="https://www.jquery-az.com/">HS</a></li>
            <li><a href="https://www.jquery-az.com/">BV</a></li>
        </ul>
    </button>
</div>

Answer 1

我想您想在单击dropdown-list之后而不是列表本身上更改dropdown-toggle。在这种情况下，请执行以下操作：

.dropdown-menu.show {
    background-color: yellow;
}

请确保为您的元素提供id或区分类，否则所有下拉菜单都将使用该颜色。

使用CSS激活boostrap dropdownlist时更改背景颜色

1 个答案: