悬停时如何使用填充突出显示整个表格单元格？答案

【问题标题】：How to highlight a whole table cell with padding when hovering?悬停时如何使用填充突出显示整个表格单元格？
【发布时间】：2012-08-08 18:58:43
【问题描述】：

我在一个表格中有以下 HTML 代码：

<td id="decllink"><a href="#">Decline</a></td>

在 CSS 文件中：

#decllink {white-space:nowrap;padding:2px 2px 2px 2px;float:right}
#decllink a {color:red;font-weight:bold;text-decoration:none;background-color:inherit}
#decllink a:hover {color:white;text-decoration:none;background-color:red}

当我将鼠标悬停在表格单元格中的链接上时，我想通过切换前景色和背景色来突出显示其文本。所以最初链接的文本颜色是红色的，背景是白色的。当我悬停链接时，它应该获得红色背景和白色文本颜色。这个 HTML/CSS 代码可以正常工作。

但是，当悬停链接时，其红色背景颜色会变得与文本一样宽和高。使用填充我想在文本周围创建一个红色“边框”，这样当悬停链接时它应该更像一个按钮。

如何实现？

【问题讨论】：

标签： html css

【解决方案1】：

随便做

#decllink { margin:0px; padding: 0px; }
#decllink a { padding: 5px } // for example

【讨论】：

【解决方案2】：

改变

#decllink a:hover {color:white;text-decoration:none;background-color:red}

到

#decllink:hover {color:white;text-decoration:none;background-color:red}

或者使用 javascript 来应用样式。

【讨论】：