从悬停在拆分按钮下拉菜单的选定选项中删除突出显示

Question

我使用bootstrap的拆分按钮下拉菜单来选择项目。它工作正常，但由于当前（选定）选项仅用于显示，而拆分下拉列表用于显示其他选项，因此我想从当前选项（左侧）中删除悬停时的突出显示。不确定除了为此添加jquery函数之外是否有其他方法。

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Answer 1

好吧，你可以添加这个CSS：

.btn-group .btn.btn-default:not(.dropdown-toggle):hover {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    cursor: default;
}
.btn-group .btn.btn-primary:not(.dropdown-toggle):hover {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    cursor: default;
}
.btn-group .btn.btn-success:not(.dropdown-toggle):hover {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    cursor: default;
}

.. 等等（对于使用的颜色样式） - 也许带有 ！important。

Answer 2

<style>
.selected:hover{
    background-color: #fff!important;
    background-image: url('none') !important;
    border-color: #fff!important;
}
</style>
<script>
$(function(){
    $(".dropdown-menu > li > a ").click(function(){
        $(this).parents().eq(1).find(".selected").removeClass("selected");
        $(this).addClass("selected");
    });
});
</script>