css - CSS - Two different hover colors on a table

Question

I've got a table that I'm using for a check list. For a collection.

Basically what I'm looking for is a way to have the table hover color GREEN if it's an item I own, and red, if its an item I don't

I'm very new to CSS and I'd appreciate any help if possible.

Here is my code (Messy)

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

score 3 · Accepted Answer

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

Sub Class out td 所以你拥有和不拥有。然后在悬停时触发它们。

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

score 2 · Accepted Answer

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

tr:hover {
    color: red;
}

tr.true:hover {
    color: green
}

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

score 2 · Accepted Answer

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

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

3 回答 3