MyBB Community Forums
Trow Hover Effect On Index - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Trow Hover Effect On Index (/thread-79603.html)

Pages: 1 2 3


Trow Hover Effect On Index - Ferron - 2010-10-04

I've found a way to get the whole trow to have a different background color when hovered. Instead of having one table cell having a hover effect at a time, the whole row will have an effect no matter where your cursor is. Here's the code that gets it done:

tbody[id*='cat'] tr:hover td.trow1, 
tbody[id*='cat'] tr:hover td.trow2 {
    background: #dedede;
}

That might be confusing so I'll explain it. Each category's tbody has it's own id which corresponds the the category number you see in the URL. So, for example, the Miscellaneous forum's URL is http://community.mybb.com/forum-12.html and 12 would be part of its id (cat_12_e). And even though each category has its own id, they all start with "cat". That's what the first part is doing. It's calling every tbody where the id has "cat" in its name.

The second and third parts are where all the magic happens. The second part (tr:hover) is setting up for the third and final part so that when a tr (the whole row) is hovered, each table cell with a class of trow1 and trow2 is set with a different background.

This works in IE7+, Firefox, Chrome, Safari, and Opera so you're safe to use it without any browser compatibility issues. And, if you're worrying about IE6, remember that this is a side effect and IE6 users don't need it to use the forum.


RE: Trow Hover Effect On Index - Damion - 2010-10-06

Awesome tutorial, Always love css tutorials Smile


RE: Trow Hover Effect On Index - faviouz - 2010-10-07

Very nice! Thanks. Smile

To have this working with IE6, I recommend http://www.xs4all.nl/~peterned/csshover.html


RE: Trow Hover Effect On Index - NBKTwitch - 2010-10-07

Darn it right when I thought I found it first... lol..

Good work ferron Big Grin.


RE: Trow Hover Effect On Index - brad-t - 2010-10-08

Very good, thanks.


RE: Trow Hover Effect On Index - the-stanger - 2011-03-26

nice tutorial,

but how to change one column in in the trow1 and trow2


RE: Trow Hover Effect On Index - airborne - 2011-04-12

nice,...thank you !


RE: Trow Hover Effect On Index - WINBOY - 2012-06-21

thanks man..repped.


RE: Trow Hover Effect On Index - FooFighter - 2012-06-22

Where do we put the code at?

And do we need to subsitute our forum id's in the code?


RE: Trow Hover Effect On Index - Eric - 2012-06-23

You don't need to change anything with it, and you can just stick it in the bottom of your global.css file for any theme (Well, not any, but most).