悬停时如何使背景色覆盖整个"block"

Question

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

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 a:hover 更改为 nav li:hover 编辑：用你的笔写 fiddle：https://jsfiddle.net/djgsgqp5/

您的 nav ul 和 li 元素没有高度。如果您将鼠标悬停在开发工具中的这些元素上，您会看到它们只有一个宽度。

fiddle 中的样式更加稳定，希望能满足您的需求。

希望对您有所帮助！

Answer 2

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

悬停时如何使背景色覆盖整个"block"

How to make the background color cover the entire "block" when hovering over it

css

hover