CODEWITHSUNDEEP
csscolorshighlight
level42
level42

Reputation: 987

CSS - Two different hover colors on a table

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/**

Upvotes: 0

Views: 1119

Answers (3)

David Zukowski
David Zukowski

Reputation: 21

How is this table generated? You could add different classes to the table rows to indicate which hover style you wish to use. Example:

http://jsfiddle.net/BkmaW/

tr:hover {
    color: red;
}

tr.true:hover {
    color: green
}

edit: removed "!important", had added it without reason.

Upvotes: 2

amazedinc
amazedinc

Reputation: 418

Simplest way: http://jsfiddle.net/9gmrG/

Sub Class out the td so you have owned and not owned. Then trigger them on hover.

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

Upvotes: 3

Srikanth AD
Srikanth AD

Reputation: 1854

You can use two CSS classes to style the rows.

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

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

Upvotes: 2

Related Questions