Question

在我的例子中，我有一个基于Bootstrap类的多行具有不同颜色的表（＆＃34;成功＆＃34;，＆＃34;警告＆＃34;，...）。首先，如果鼠标已经超过＆＃34;成功＆＃34;它变得更加绿色＆＃34;没关系。如果点击＆＃34;成功＆＃34;排，我取代＆＃34;成功＆＃34;我的班级和＃34; greenSelected＆＃34;但如果我越过那一行，悬停颜色就是灰色，而不是＆＃34; greenSelected＆＃34;。

我尝试使用CSS中的其他解决方案！重要但是id不起作用。

.greenSelected tr:hover{
     background-color:#D0E9C6;
}


.greenSelected:hover{
    background-color:#D0E9C6 !important;
}

实施例： http://jsfiddle.net/5ddxao12/

Answer 1

这是错误的选择器和specificity不足的组合。请尝试使用 (See JSFiddle) ：

.table-hover > tbody > .greenSelected:hover td {
  background-color: #D0E9C6;
}

<强>解释

在您包含的Bootstrap CSS中定义的是此规则：

.table-hover > tbody > tr:hover > td, ... {
  background-color: #f5f5f5;
}

要覆盖此规则，您的新规则必须更多特定（在我的解决方案中，我们通过选择一个元素而不是它的标记来实现这一点名称）。此外，正如in this answer指出的那样，你应该将悬停选择器设置在 table-row 级别，但是你希望改变背景颜色的元素是它的表-cell 孩子。

虽然可以使用!important声明来克服特异性问题，但我不推荐它。相反，请确保无论何时创建CSS规则，您都只需要具体，并且很好地理解为什么要应用规则。

Answer 2

背景在td上设置，所以这样做：

tr.greenSelected:hover td{
  background-color:green !important;
}

添加！important以覆盖bootstraps规则。

在CSS类中实现悬停颜色更改不起作用

2 个答案: