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

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

这里是我的代码小提琴：https://jsfiddle.net/b8js8zkq/

我已经看过How do I make the hover background color fill the height of the link?，并没有找到一个很好的答案，所以请不要纪念这个作为一个重复。

2016-11-23 jacobtohahn

您的代码存在问题，在<h3>和<li>上都有margin和padding。因此删除它们并将它们作为padding添加到<a>标记。你完成了！

的padding并且每个15px的margin构成总padding到<a>的30px。这就是我在下面做：

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

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

来源

2016-11-23 21:30:48

哇！感谢您及时的回复！ – jacobtohahn

@jacobtohahn欢迎您......'：）' –

我建议你从这个

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

改变你的CSS这个

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

这将让它成为你h中的任何列表项徘徊时，eader类将改变其背景颜色。

来源

2016-11-23 21:31:00 Ben

不是真正的黑客工作，这是大多数网站导航栏的工作方式。这样，悬停时，标题列表中的任何内容都会发生变化。 – Ben

我认识Ben ......那是不对的，对吧？我们需要解决问题，而不是修补它。我曾经这样做过，但现在我试图找到根本原因并修复它，而不是修补它。如果你同意我......'：D' –

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

固定小提琴。

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

来源

2016-11-23 21:31:42 junkfoodjunkie

jsfiddle update

老

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

新

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

你想改变li元素的颜色，而不是仅仅是一个标签

来源

2016-11-23 21:35:52

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

回答

相关问题