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

Question

我有这个js小提琴https://jsfiddle.net/658epj15/

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

当我徘徊在链接上时，该单词周围有一个灯光的背景，即单词的长度。

我如何扩展它，以使其在整个<td>上亮起，而不仅仅是Div，因此它从<td>的左边框照亮到<td>的右边框？

Answer 1

使用tr td代替.navChild

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

https://jsfiddle.net/658epj15/2/

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

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;
}
tr td:hover,
.current {
  background-color: #626262;
}

<div class="navParent">
  <nav>
    <table>
      <tr>
        <td class="current"><a class="navChild" href=b illboard.html>Nav 1</a></td>
        <td><a class="navChild" href=a bout.html>Nav 2</a></td>
        <td><a class="navChild" href=l ocations.html>Nav 3</a></td>
        <td><a class="navChild" href=p ricing.html>Nav 4</a></td>
      </tr>
    </table>
  </nav>
</div>

Answer 2

，而不是在 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;
}
.navParent td:hover{
	background-color:#626262;
}

<div class = "navParent">
		<nav>
		<table>
			<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>

Answer 3

您要将A显示为块元素，因此它占用其所在的单元格空间。此外，您要将表上的牢房设置为0围绕文本的间距（您说您想要它到边界）。此更新的小提琴还修复了原始的一些不正确的HTML（闭合表标签是错误的）。https://jsfiddle.net/658epj15/3/

.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>

Answer 4

默认情况下，您的<a>标签设置为display: inline，并且不会填写<td>。将它们设置为display: block，悬停应按预期工作。

更新了小提琴。