Admin Forum:Hover Coloring in Tables

Forums: Admin Central Index → Technical Help → Hover Coloring in Tables Wikia's forums are a place for the community to help other members. To contact staff directly or to report bugs, please use Special:Contact.

Another admin wanted to add a table mouseover hover effect like they have here, but I can't figure out how to implement it. I THINK it uses jQuery to work, and I don't really know much about that. Can anyone help with this? -- Lycentia 22:13, April 4, 2012 (UTC)
 * Their Common.js did not show anything about this. But their Common.css however, contains:

table.linetable { background: #996600 border: 1px #321801 solid; border-collapse: collapse;} table.linetable th, table.linetable td { border: 1px #321801 solid; padding: 0.2em; } table.linetable th { background: #996600; text-align: center; } table.linetable caption { margin-left: inherit; margin-right: inherit; font-weight: bold; } table.treetable { background-color: transparent; border: 1px #f9d691 solid; border-collapse: collapse;} table.treetable th { padding-left: 2px; } table.treetable th, table.treetable td { border: 1px #f9d691 solid; border-collapse: collapse; padding-left: 2px; } table.treetable tr { background-color: #cb995e; } table.treetable tr:hover { background-color: #ffff99; } table.hover tr { background-color: transparent; } table.hover tr:hover { background-color: #ffff99; } table.hover2 tr:hover { background-color: #cc9555; } table.hover3 tr { background-color: #cb995e; } table.hover3 tr:hover { background-color: #ffff99; }
 * Notice the usage of the class treetable in the table source. ~ Flightmare 22:30, April 4, 2012 (UTC)
 * I forgot to add that the hover is the thing you are looking for. Good luck. ~ Flightmare 22:32, April 4, 2012 (UTC)


 * I copied and pasted it exactly as you have it here and tested it. It isn't working. -- Lycentia 00:31, April 5, 2012 (UTC)
 * It was not intended for 1:1 copy paste usage, it was a guideline. The CSS might get overridden somewhere else. Furthermore, you make use of the class linetable where I said it is about treetable. ~ Flightmare 00:45, April 5, 2012 (UTC)
 * Try adding it to MediaWiki:Wikia.css, see if it works &mdash;  S a m  Wang  01:27, April 5, 2012 (UTC)


 * Bingo! Worked when I put it in the Wikia.css. Thank you both. -- Lycentia 01:35, April 5, 2012 (UTC)
 * I liked the idea so I implemented it on my own wikis as well, but table.hover tr:hover { background-color: #ffff99; } is everything you need. You can give a table multiple classes {| class="wikitable hover".... will load both the wikitable and hover classes. This way you can combine the hover effect with any table you have. ~ Flightmare 21:51, April 6, 2012 (UTC)