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: 279
        
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