Question

我正在使用bootstrap 3.3.7按钮，并希望当鼠标聚焦，悬停或点击它时按钮保持相同的颜色。

<button class="btn btn-default delete-btn">Delete</button>

这是我修改CSS选择器的背景颜色的地方：

.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
    background-color: white;
}

这适用于焦点或悬停事件。

然而，当鼠标点击按钮时，它会变为默认的灰色。我在这里缺少什么想法？抓我的头......

Answer 1

Bootstrap样式表有这组选择器：

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover

.btn-default:active:focus和.btn-default:active:hover比只有一个伪类的选择器更具体。

您需要使您的选择器具有同等特异性：

.delete-btn:hover, .delete-btn:focus,
.delete-btn:active:hover, .delete-btn:active:focus, {
    background-color: white;
}

Answer 2

尝试选择.btn.btn-default.delete-btn仅读取.delete-btn并使用重要内容。

.btn.btn-default.delete-btn:hover, .btn.btn-default.delete-btn:focus, .btn.btn-default.delete-btn:active {
     background-color: white !important;
}

否则，在浏览器上检查元素以找到灰色并用白色替换整个css规则。

否则，请检查您的javascript中是否有错误，并使用点击事件替换您的颜色规则。

Answer 3

尝试在代码末尾添加重要内容，如下所示：background-color: white!important;。

Answer 4

在你的css属性之后添加！important，用你的bootstrap默认css替换你的css优先级为了避免使用box-shadow。添加此Css：---

home

Answer 5

在样式中使用！important来替换默认样式的bootstrap

Bootstrap Button CSS更改不起作用：活动选择器

5 个答案: