從選定的分割按鈕下拉選項中移除高亮選項

我使用引導程序的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>

來源

2014-12-02 santa

那麼你可以添加這個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） - 可能與重要的！

來源

2014-12-02 13:35:18 Ferret

嗯，我喜歡CSS唯一的解決方案。謝謝，我可能正在推翻它。 – santa 2014-12-02 13:53:31

這個效果很好：.nohover button：first-child：hover { background-color：#fff; border-color：#ccc;光標：默認; 光標：默認; }，然後將nohover類添加到btn-group類。 – santa 2014-12-02 14:05:49

<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>

來源

2014-12-02 13:52:53 Michael

是的，這是我的正常潰敗，但我認爲在這種情況下，簡單的CSS是更好的方法。謝謝。 – santa 2014-12-02 14:07:20

從選定的分割按鈕下拉選項中移除高亮選項

回答

相關問題