CSS - 桌子上两种不同的悬停颜色答案

【问题标题】：CSS - Two different hover colors on a tableCSS - 桌子上两种不同的悬停颜色
【发布时间】：2013-07-31 03:08:50
【问题描述】：

我有一张表格，用于检查清单。收藏。

基本上我正在寻找一种方法，如果它是我拥有的项目，则表格悬停颜色为绿色，如果它是我不拥有的项目，则为红色

我对 CSS 很陌生，如果可能的话，我将不胜感激。

这是我的代码（凌乱）

**http://jsfiddle.net/6TYBb/1/**

【问题讨论】：

【解决方案1】：

这个表是如何生成的？您可以向表格行添加不同的类以指示您希望使用的悬停样式。示例：

tr:hover {
    color: red;
}

tr.true:hover {
    color: green
}

编辑：删除“！important”，无故添加。

【讨论】：

!important; 是什么意思？做什么？
为什么 !important 确实很重要？这里不需要。它被认为是不好的做法，只应在所有其他选项都失败时使用。如果你使用它，你的代码将变得难以维护！
不需要，我不知道为什么我把它放进去，因为 .true 已经覆盖了默认的悬停。 @level42，!important 将导致所选样式被用于其他任何其他样式，无论其特殊性如何。

【解决方案2】：

最简单的方法：http://jsfiddle.net/9gmrG/

从 td 中分出子类，因此您拥有和不拥有。然后在悬停时触发它们。

tr:hover{
    background-color: #ccc;
}
tr:hover td.owned{
    background-color: green;
}
tr:hover td.notowned{
    background-color: red;
}

【讨论】：

【解决方案3】：

您可以使用两个 CSS 类来设置行的样式。

tr.own:hover { background: green; } 
tr.not:hover { background: red; }

【讨论】：