让表格单元格在鼠标悬停时变成不同的颜色

Question

目前，当我创建一个表格并将鼠标悬停在一个单元格上时，整行都会突出显示。我正在努力使它只是直接的单元格。以下是与我的样式表中的表格相关的所有 CSS 代码：

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;}

我知道这可能是一个简单的修复，但我找不到让它工作的地方。我尝试的一切只是完全消除鼠标悬停效果，而不是按照我想要的方式。

Answer 1

改变

table tr:hover td{background-color:#fff;}

到

table td:hover <strike>td</strike>{background-color:#fff;}

这应该突出显示单元格而不是整行。

更新 tr:hover 被提及两次。它也应该是td:hover，而不是td:hover td。这应该有效：

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 td:hover {background-color:#fff;}

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