CSS：填充堆叠和仅影响文本的颜色

Question

我已经寻找其他方法来解决这个问题，包括display：block;但似乎没有工作， 谁能告诉我我做错了什么？ 这是我的代码：

HTML：

<header>
<div id="menu">
    <div id="item"><b>HOME</b></div>
    <div id="login"><b>LOGIN</b></div>
<div>
</header>

CSS：

#login {
background-color: white;
color: black;
font-size: 20px;
line-height: 30px;
height: 30px;
width: auto;
border: 3px solid white;
border-radius: 30px;
text-align: center;
float: right;
margin-left: 10px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;}

#login :hover {
background-color: black;
color: white;}

这是JSFiddle

我遇到的主要问题是，对于我来说，Chrome中的文字背景颜色会发生变化，但填充不会像我预期的那样。我希望找到一种方法。

Answer 1

如果您想要更改div的背景颜色而不是文本，则应删除#login :hover之间的空格，使其为#login:hover

白色空间对CSS选择器很重要。如果你在它之间放一个空格意味着下一个选择器是第一个选择器的任何后代。

当你有#login :hover时，意味着任何悬停的子/后代元素都会受到样式规则的影响，但不会影响#login本身。

Answer 2

删除#login :hover之间的空格，使其为#login:hover。