Getting a table cell to become a different color on mouseover

Posted by Andrei Korchagin on Stack Overflow See other posts from Stack Overflow or by Andrei Korchagin
Published on 2010-06-11T04:04:28Z Indexed on 2010/06/11 4:12 UTC
Read the original article Hit count: 218

Filed under:
|
|

Currently, when I create a table, and I mouseover a cell, that entire row is highlighted. I'm trying to make it so that it is only the immediate cell. Here's all the CSS code that pertains to tables in my stylesheet:

table{margin:.5em 0 1em;}
table td,table th{text-align:center;border-right:1px solid #fff;padding:.4em .8em;}
table th{background-color:#5e5e5e;color:#fff;text-transform:uppercase;font-weight:bold;border-  bottom:1px solid #e8e1c8;}
table td{background-color:#eee;}
table th a{color:#d6f325;}
table th a:hover{color:#fff;}
table tr.even td{background-color:#ddd;}
table tr:hover td{background-color:#fff;}

table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;}

I know it's probably a simple fix but I can't find where to make it work. Everything I try just kills the mouseover effect entirely rather than making it the way I want it.

Thanks in advance!

© Stack Overflow or respective owner

Related posts about css

Related posts about table