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 编辑：从笔中取出这个小提琴：https://jsfiddle.net/djgsgqp5/

您的nav ul和li元素没有达到高度。如果你将鼠标悬停在devtools中的那些元素上，你会发现它们只有宽度。

小提琴中的风格更加稳定，希望能满足您的需求。

希望有所帮助！

Answer 2

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

如何使背景颜色覆盖整个＆＃34;块＆＃34;当它盘旋在它上面时

2 个答案: