Reddit Memes/Reddit Videogames/Blizzard/Steam" />
And my CSS Code:
#tblHeadings tr:hover
{
background-color:#F4F4F4;
}
I know this code is a bad thing, because it puts the background color on every tr. But, how else can I do this, without putting any code into my View?
A:
You need to check for each tr in the table individually. If any of them have the .hover class then apply the styles to that table.
The way this works is that your tr tags will need to have some class in them to identify them, and then for the .hover class, this class will need to have the style for the tr.
Also, since you're working with table's you might have to use nth-child. This css selector is a little tricky but you'll have to understand it to be able to use it.
.hover tr:nth-child(even) { // this tr is even, then style it }
Note that this is the "odd" table, and if you want all rows you'll need to adjust it a bit.
A:
In your CSS, just add :hover to the tr class:
.myTable tr:hover {
background-color: blue;
}
A:
HTML
CSS
.hovered img{
background:blue;
}
DEMO
http://jsfiddle.net/VNqj7/
http://jsfiddle.net/VNqj7/1/
This technique will help you to learn CSS selectors. It’s easy and works in all major browsers.
You can also add a :hover to each of the specific tr’s.
http://jsfiddle.net/VNqj7/5/
http://jsfiddle.net/VNqj7/6/
References
CSS Selectors Level 3
CSS Selectors