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

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代替应用样式。