html - 悬停时如何用填充突出显示整个表格单元格？

Question

我在一个表中有以下 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 代码。

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

如何做到这一点？

Answer 1

只做

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

Answer 2

改变

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

到

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

或使用 javascript 来应用样式。