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

Question

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

以下是我的代码的小提琴：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的{​​{1}}和margin构成总15px到30px的{​​{1}}。这就是我在下面所做的：

padding

小提琴：https://jsfiddle.net/19r4a4ft/

Answer 2

我建议您从这个

更改您的CSS

.header a:hover{
  background-color: #f3e5d8;
}

到这个

.header li:hover{
  background-color: #f3e5d8;
}

这将使得头文件类中的任何列表项都会在悬停时更改其背景颜色。

Answer 3

https://jsfiddle.net/b8js8zkq/1/

固定小提琴。

删除<h3>和<li>上的填充，并将相同的填充添加到<a> - 标记。

Answer 4

jsfiddle update

旧

 .header a:hover {
  background-color: #f3e5d8;
}

新

.header li:hover {
   background-color: #f3e5d8;
}

您想要更改li元素的颜色而不仅仅是标记