从选定的分割按钮下拉选项中移除高亮选项

Question

我使用引导程序的split button dropdowns选择项目。它工作正常，但由于当前（选定）选项仅用于显示，而拆分下拉列表用于显示其他选项，所以我想从当前选项（左侧部分）中移除高亮显示。不知道是否有除了添加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; 
} 

..等（对于使用colorstyles） - 可能与重要的！

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>