悬停在背景色上时如何使背景色覆盖整个“色块”

Question

我正在学习CSS，并且试图从此网站复制一个简单的导航栏。 我希望将鼠标悬停在某个项目上时出现黑色背景，所以我这样做了：

nav a:hover {
background: black;
}

但背景仅覆盖文字。 我希望它像原始站点一样覆盖整个元素。

如果需要，这是锚标记CSS：

nav a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: white;
    float: left;
    padding-right: 2em;
    margin-top: 1.5em;
}

Answer 1

我假设您在<ul><li></li></ul>结构中具有nav元素。

在这种情况下， nav a:hover更改为nav li:hover编辑：用钢笔把这个小提琴弄掉了： https : //jsfiddle.net/djgsgqp5/

您的nav ul和li元素没有变高。 如果将鼠标悬停在devtools中的那些元素上，则会看到它们只有一个宽度。

小提琴中的样式更稳定，希望可以满足您的需求。

希望有帮助！

Answer 2

我在您的示例网站上编写了相同的代码，希望对您有所帮助： http : //jsfiddle.net/yL7yj4xL/1/ （您必须删除padding-right并将其替换为padding ）