我做了以下下拉按钮（JSBin）。当前，当下拉列表打开时，当我将鼠标悬停在列出的项目上时，按钮本身的颜色变为深蓝色。我不希望这种情况发生。我希望它将其颜色更改为#1abc9c。有谁知道如何做到这一点？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.rb .btn.btn-primary {
background-color: #1abc9c;
border-color: white
}
.rb .btn.btn-primary:hover {
background-color: #2fe2bf;
}
.rb .btn.btn-primary:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.rb .btn.btn-primary:active {
border-color: white;
background-color: #1abc9c;
}
.rb .dropdown-toggle {
border-color: white !important;
}
</style>
</head>
<body>
<div class="rb">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
编辑1：我有一个更好的版本here。现在，当按下上面的
normal按钮时，我们看到颜色变成了稍微深一点的蓝色，而当我们松开按钮时，颜色变成了明亮的蓝色。我希望对下拉按钮具有相同的效果：即，按按钮==>稍深的蓝色==>释放按钮==>较亮的蓝色，并显示下拉列表==>按按钮== >较暗的蓝色==>释放按钮==>较亮的蓝色，下拉列表被隐藏。有人知道这是否可能吗？
最佳答案
请尝试这个，希望对您有帮助。
.rb .dropdown:active .btn-primary:active {
background-color: #1abc9c !important;
}
关于css - 悬停其列出的元素时设置下拉按钮的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42989041/