2010-10-04, 02:55 AM
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:
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.
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.