Change color of whole <tr> on hover.

[Grimlogic]

Hi,

I have a rather challenging CSS/template problem, maybe you can help me. I'm going for a table-less, line-less look in my current theme, and so I have to make differentiation by color.

Basically, I want to be able to change the color of a whole <tr> when I hover the mouse over it.

Pictures will explain the matter better (some of these are too dark too see here on a light background, but on a similarly dark one you can see the hover effect well; also don't mind the forum icons, those will not be in the final theme):

This is how my thread listings look like originally.



When you select a thread for moderation, it activates the class '.trow_selected td'. That colors the whole row, like so:



I'd like to emulate that when I mouse over forum and thread listings. Currently, I've defined ':hover' classes for the '.trow1' and '.trow2',

.trow1:hover { background: #color; }
.trow2:hover { background: #color; }

but the only manages these:













...you get the idea. Not to mention that they do that for all '.trows', whether or not they're forum or thread listings.

Like I said, I'd like to do that for the entire row, in just both the forum and thread listings.

Anybody that can help me? Note that I've already removed the counters for threads and posts on the index, as well as ratings in thread listings in the templates, so you can opt to leave these out in the consideration. I'd preferably like suggestions for code that'd also work in IE, although that isn't as critical. I'll take all the help I can get!

[Audentio]

table .tborder tr:hover {
background: color here;
}

[Grimlogic]

table .tborder tr:hover {
background: color here;
}

Sorry, but not even tr:hover by itself works...

EDIT: Thanks for the tip though. It gave me something to start googling on, and I found the answer... mostly.

table tr:hover td {
background: color here;
}

However, now this changes colors for all TRs. I'm still trying to look for what templates hold the forum and thread listings so I can create custom classes for those, and use that custom class in the code instead. If anyone can help me there that'd be great.

[Audentio]

Strange...it works for me. Don't forget to include .tborder after table, otherwise itll highlight basically everything.

[Grimlogic]

Strange...it works for me. Don't forget to include .tborder after table, otherwise itll highlight basically everything.

Yeah I did try the whole thing, but strangely nothing happened. Maybe because my .tborder value is empty?

And did this do it only for the forum and thread listings? Or for all tables, like in the user profiles too?

[Bas]

why don't you try this

table.tborder tr:hover td.trow1 {
background-color: blue;
}

table.tborder tr:hover td.trow2 {
background-color: green;
}

[Grimlogic]

why don't you try this

Ahh... now I see what Audentio was getting at. I thought table and .tborder were separated. They shouldn't.

Works fine, thanks Audentio and Bas! Now how do I apply this to specific CSS classes? Replace trow1 and 2 with something else?

---

Here's the solution for those interested.

.customhover {
	background: original bg color;
}

table.tborder tr:hover td.customhover {
	background: hover bg color;
}

Then, just replace all instances of '{$bgcolor}' with 'customhover' in the following templates.

forumbit_depth2_cat
forumbit_depth2_forum
forumdisplay_announcements_announcement
forumdisplay_announcements_announcement_modbit
forumdisplay_thread
forumdisplay_thread_modbit

The effect should work without a hitch, except in IE which is a total pain to design for.