CSS-一张表上有两种不同的悬停颜色

Question

我有一个用于检查列表的表。对于集合。

基本上，我正在寻找的是一种方法，如果是我拥有的物品，可以将表格悬停为绿色，如果是不是我不的物品，则悬停为红色

我是CSS的新手，如果可能的话，我会很感激任何帮助。

这是我的代码（混乱）

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

Answer 1

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

将td子类化，使您拥有和不拥有。然后在悬停时触发它们。

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

Answer 2

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

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

http://jsfiddle.net/6TYBb/215/

Answer 3

这个表是如何生成的？您可以将不同的类添加到表行中，以指示要使用的悬停样式。示例：

http://jsfiddle.net/BkmaW/

tr:hover {
    color: red;
}
tr.true:hover {
    color: green
}

edit：删除了"！important"，并添加了它。