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

Question

我有一张桌子，我正用于检查清单。对于一个集合。

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

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

这是我的代码（凌乱）

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

Answer 1

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

Sub class out the 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
}

编辑：删除了“！important”，已经无理由地添加了它。