html - 如何让我的链接悬停背景填满整个背景？

Question

我使用 ul 制作了一个简单的导航菜单，但是当您将鼠标悬停在它上面时，背景颜色不会改变整个背景。我认为这可能与我的 padding 元素有关。我该如何解决这个问题？

这是我的代码的 fiddle :https://jsfiddle.net/b8js8zkq/

我看过How do I make the hover background color fill the height of the link?并没有在那里找到好的答案，所以请不要将此标记为重复。

Answer 1

您的代码的问题是，您有 margin和 padding在两个<h3>和 <li> .所以删除它们并将它们添加为 padding到 <a>标签。大功告成!

padding和 margin每个 15px构成30px总计padding至 <a> .这就是我在下面所做的:

.header li {
  border-bottom: 1px solid #888;
  font-size: 20px;
  padding: 0;
}
ul h3 {
  margin: 0;
  padding: 0
}
.header a {
  display: block;
  padding: 30px;
}

fiddle :https://jsfiddle.net/19r4a4ft/