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

Question

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

这是我的代码Fiddle链接: https://jsfiddle.net/b8js8zkq/ 我看过如何使hover背景色填充链接的高度？，但没有找到好的答案，请不要将其标记为重复。

- jacobtohahn

Answer 1

您的代码问题在于，<h3>和<li>都有margin和padding。因此，请将它们删除，并将其作为padding添加到<a>标记中。这样就完成了！

每个15px的padding和margin共计30px，添加到<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/

- Praveen Kumar Purushothaman

---

哇！谢谢你的快速回复！ - jacobtohahn

Answer 2

我建议将你的CSS从这个改为：

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

到这里

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

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

- Ben

---

这并不是一个粗制滥造的工作，这是大多数网站导航栏的工作方式。这样，在标题列表中的任何内容在悬停时都会发生变化。 - Ben

我知道Ben...那不对，对吧？我们需要解决问题，而不是打补丁。以前我也这样做，但现在我尝试找到根本原因并修复它，而不是打补丁。如果你同意我的话... :D - Praveen Kumar Purushothaman

Answer 3

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

修复演示。

您需要移除 <h3> 和 <li> 上的内边距，并将同样的内边距添加到 <a> 标签上。

- junkfoodjunkie

Answer 4

jsfiddle 更新

旧的

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

新的

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

你想要改变 li 元素的颜色而不仅仅是 a 标签

- Luminous_Dev