Getting a table cell to become a different color on mouseover
- by Andrei Korchagin
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!
