Change color of whole <tr> on hover.

[Grimlok]

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',

Code:

.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!

[Grimlok]

I found the answer... mostly.

Code:

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.

[FirefoxWiz]

Just make a custom trow class and do a hover, and then edit it wherever you want this new trow color / hover thing to be displayed to the new CSS class!

[Grimlok]

(09-14-2008 07:47 AM)FirefoxWiz Wrote:  Just make a custom trow class and do a hover, and then edit it wherever you want this new trow color / hover thing to be displayed to the new CSS class!

Yeah, finally worked it out with some help. Here's the solution for those interested.

Code:

.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.

[eOutcast]

(09-14-2008 03:52 PM)Grimlok Wrote:  

(09-14-2008 07:47 AM)FirefoxWiz Wrote:  Just make a custom trow class and do a hover, and then edit it wherever you want this new trow color / hover thing to be displayed to the new CSS class!

Yeah, finally worked it out with some help. Here's the solution for those interested.

Code:

.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.

very nice, thank you!
_______________
indianapolis web design

[4evercouture]

thanks for the helpful code

[ghdfans2010]

I think this is very easy! But eOutcast says in detail!

[kirizmaxx]

thx for the code!

[clcheapshoes520]

Change color of whole <tr> on hover. does easy?