Получение ячейки таблицы, чтобы стать другим цветом при наведении курсора

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