Javascript CSS链接悬停-如何扩展悬停时改变颜色的区域

我有这把小提琴

当我将鼠标悬停在链接上时，单词周围有一个照亮的背景，即单词的长度

---

我如何扩展它，使其照亮整个

，而不仅仅是div，从而从

的左边框照亮到

的右边框？

使用

tr td

而不是

.navChild

tr td:hover {
  background-color: #626262;
}

更新，关于您的评论：
注意以下几行

tr td:hover, .current {
  background-color: #626262;
}

及

---

默认情况下，您的

不是在
a上添加悬停
而是在
td上添加悬停


.navParent表{
颜色：#ffffff；
表布局：固定；
文本对齐：居中；
位置：绝对位置；
字体大小：20px；
边界：无；
边界塌陷：塌陷；
宽度：100%；
}
.navParent表td{
左边框：1px实心#000000；
}
.navParent表td:第一个子表{
左边界：无；
}
纳瓦先生{
文字装饰：无；
颜色：黑色；
}
navChild先生
{
宽度：100%；
高度：自动；
}
.NAVTD:悬停{
背景色：#626262；
}
您希望将a显示为块元素，以便它占用所在单元格的空间。另外，您希望将表格上的cellpadding设置为0，以消除文本周围的间距（您说过希望它从边框到边框）。此更新的fiddle还修复了原始文件中的一些错误HTML（结束表标记错误）

.navParent表{
颜色：#ffffff；
表布局：固定；
文本对齐：居中；
位置：绝对位置；
字体大小：20px；
边界：无；
边界塌陷：塌陷；
宽度：100%；
}
.navParent表td{
左边框：1px实心#000000；
}
.navParent表td:第一个子表{
左边界：无；
}
纳瓦先生{
文字装饰：无；
颜色：黑色；
}
navChild先生{
宽度：100%；
高度：自动；
显示：块；
}
.navChild:悬停{
背景色：#626262；
}
谢谢你的回答，非常有用。我可以问一个附加问题吗，比如说我希望当前页面在它的适当链接上有一个恒定的背景，比如Nav 1，我该怎么做？我似乎无法单独选择它并给它一个背景色。@您可以通过PHP定位活动站点，并向td插入一个类，其作用与我看到的悬停函数相同。PHP不是我的强项，所以你能提供一个这样的例子，或者一个替代的例子吗？我不明白为什么我给Nav 2条目一个
class=“current”
类，然后执行
tr td.current{background color:#ffffffff；}
，它不会work@SteveJobs你看到放在哪里了吗？
tr td:hover, .current {
  background-color: #626262;
}

<td class="current"><a class="navChild" href=b illboard.html>Nav 1</a></td>

.navParent table {
  color: #ffffff;
  table-layout: fixed;
  text-align: center;
  position: absolute;
  font-size: 20px;
  border: none;
  border-collapse: collapse;
  width: 100%;
}

.navParent table td {
  border-left: 1px solid #000000;
}

.navParent table td:first-child {
  border-left: none;
}

.navParent a {
  text-decoration: none;
  color: black;
}

.navChild {
  width: 100%;
  height: auto;
  display: block;
}

.navChild:hover {
  background-color: #626262;
}

<div class="navParent">
  <nav>
    <table cellpadding="0">
      <tr>
        <td><a class="navChild" href=billboard.html>Nav 1</a></td>
        <td><a class="navChild" href=about.html>Nav 2</a></td>
        <td><a class="navChild" href=locations.html>Nav 3</a></td>
        <td><a class="navChild" href=pricing.html>Nav 4</a></td>
      </tr>
      </table>
  </nav>
</div>