更改引导按钮和下拉切换的颜色(Changing colors on bootstrap buttons and dropdown-toggle)
我有一个按钮组如下:
HTML
Sync
New PG
CSS:
.red-outline-button:hover {
border-color: #C4213C;
background-color: #f8d3d9;
color: #000
}
.gold-outline-button:hover {
border-color: #B3892F;
background-color: #f4ebd7;
color: #000;
}
以上工作。 当我将鼠标悬停在按钮上时,颜色会发生变化。 但是,当我单击并按住或单击第二个按钮以显示下拉列表时,颜色将切换回默认灰色。
我试过.red-outline-button:active但没有帮助。
我的问题是,在以下情况下设置css颜色的正确方法是什么:
按下按钮
打开下拉列表(仅限按钮。我不需要设置实际下拉列表的样式
I have a button group as below:
HTML
Sync
New PG
CSS:
.red-outline-button:hover {
border-color: #C4213C;
background-color: #f8d3d9;
color: #000
}
.gold-outline-button:hover {
border-color: #B3892F;
background-color: #f4ebd7;
color: #000;
}
The above works. When I hover the mouse over the buttons, the color changes. However, When I click and hold or click the second button to reveal the dropdown, then, the color switches back to the default gray.
I've tried .red-outline-button:active but that did not help.
My question is, what is the right way to set css colour when:
Button is pressed
Dropdown is opened (only the button. I don't need to style the actual dropdown
原文:https://stackoverflow.com/questions/40762013
更新时间:2020-06-07 11:06
最满意答案
您需要覆盖默认的 Bootstrap类:
.btn-default.focus, .btn-default:focus
这将适用于您不想覆盖所有:
.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {
border-color: #B3892F;
background-color: #f4ebd7;
color: #000;
}
希望它能帮到你。 :)
You need to override the default Bootstrap classes:
.btn-default.focus, .btn-default:focus
This will work in case you don't want to override all:
.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {
border-color: #B3892F;
background-color: #f4ebd7;
color: #000;
}
Hope it helps you. :)
相关问答
您的html结构与您发布的示例不同。 只是改变: $('#button_group_1 button').removeClass('active');
对此: $('.btn-group button').removeClass('active');
和addClass一样...... your html structure is not the same as the example you posted. just change: $('#button_group_1 button').r
...
我有同样的问题,它正在驱使我疯狂! 直到我发现我正在加载bootstrap之前jqueryui ... 我切换了订单并注意到,如果我加载jqueryui BEFORE引导之前 ,我没有这样的问题:) I had the same problem and it was driving me mad!!!! Until I found that I was loading bootstrap before jqueryui... I switched the order and notice that
...
实际input复选框在花式div.toggle-group后面隐藏( display: none )。 这个div只是看起来像一个使用CSS和JavaScript切换的复选框。 事实上,复选框实际上是在场景后面聚焦/标签,你只是无法看到它,因为它的隐藏。 如果你不需要,你可以编写明确的JQuery来关注隐藏的复选框时关注外部元素。 这里是你需要包含的JQuery代码: $( "input:checkbox" ).focus(function() {
if($(this).is(':checke
...
CSS: .navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
background: red;
}
CSS: .navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:fo
...
我会建议你使用这个简单的CSS来实现你想要的 - /* Change color of dropdown links on hover */
.dropdown-menu a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
display: block;
}
/* Change the background c
...
在Knockout中,你不会使用DOM。 您为应用程序状态建模并操纵模型。 Knockout绑定负责更新UI。 要更改选择的项目,只需设置绑定变量( view )。 在示例中,下拉列表将从没有值开始,然后它将被赋予我们想要的值。 vm = {
view: ko.observable()
};
ko.applyBindings(vm);
// Simulating fetching from cookie and setting
setTimeout(() => vm.view
...
我设法解决了这个问题。 这只是一个愚蠢的错误。 列表中的数据由异步进程填充。 所以我应该在点击下拉按钮后使用fakeAsync和tick() 。 在将数据填充到列表中之前,视图已更新。 这导致了这个问题。 这是固定的代码: it("Should show options when toggle option is clicked",fakeAsync(() => {
fixture.detectChanges();
let toggleButton = fixture.debu
...
rails中的一些奇怪的bug:我的application.js最初是: //= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
我不得不重新排序它并在jquery之前移动bootstrap 修改了application.js //= require bootstrap
//= require jquery
//= require jquery_ujs
//= require jq
...
您可以使用Pseudo Classes:请参阅CSS Pseudo-classes 。 .navbar-inverse .navbar-nav li:first-child:hover {
background-color: green;
}
.navbar-inverse .navbar-nav li:nth-child(2):hover {
background-color: lightblue;
}
.navbar-inverse .navbar-nav li:nth-c
...
您需要覆盖默认的 Bootstrap类: .btn-default.focus, .btn-default:focus
这将适用于您不想覆盖所有: .gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {
border-color: #B3892F;
background-color: #f4ebd7;
color: #000;
}
工作演示: http : //www
...