Question

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

2010-06-11

939

css hover css-tables

目前，当我创建一个表格并将鼠标悬停在一个单元格上时，整行都会突出显示。我试图使它只突出显示直接单元格。以下是我的样式表中与表格相关的所有 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;}