：将一个元素悬停在：active css丢失了css

Question

我有以下CSS：

.point.active,
.point:active {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

示例：http://jsfiddle.net/7zmjvaxL/

这很有效。但是当元素处于活动状态并且我将鼠标悬停在它上面时，它会丢失CSS颜色。如果元素处于活动状态并且我将鼠标悬停在它上面，我如何保持颜色？

感谢。

Answer 1

Bootstrap为某些元素提供了许多默认设置。

在您的情况下，它正在强制执行此规则：

.btn-default.active:hover {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}

这会覆盖您自己的规则集。

最好的办法是删除类btn-default，因为它不是一个默认按钮，而是一个自定义按钮，然后为你的元素添加CSS规则。

For example, this jsfiddle demo：

.btn-point {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

Answer 2

试试这个：

.point.active,
.point:active,
.point:active:hover{
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

你在某处有.point:hover{}吗？