Question

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

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

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

如何对此进行扩展，使其在整个<td>而不仅仅是div上亮起，因此它从<td>的左边框到{{1}的右边界照亮}？

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>

＆＃13;

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

＆＃13;

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

＆＃13;

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显示为块元素，以便占用其所在单元格的空间。此外，您还要将表格上的cellpadding设置为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，悬停应该按预期工作。

Updated fiddle

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

4 个答案: