Html CSS-在悬停时更改背景不起作用

我正在尝试使用CSS，所以当你在某物上悬停时，它会改变背景颜色。不过，我使用的代码不起作用。我似乎不知道为什么。应该行的，对吧

正文{
保证金：0；
字体系列：Arial；
字号：1em；
}
.navbar ul，a{
保证金：0；
颜色：白色；
溢出：隐藏；
}
李，a{
文字装饰：无；
显示：内联块；
填充：10px；
背景：黑色；
}
李娜：停下来{
背景颜色：蓝色；
}
李{
列表样式类型：无；
浮动：左；
}

黑暗的网站模板乔丹男爵

你犯了一个非常简单的错误

当你有了这个密码

li a: hover

移除

a

和

之间的空格：悬停

并查看魔法

现在，它应该是这样的

li a:hover

@Joseph Young提到这一点，别忘了对他的评论投赞成票。

正文{
保证金：0；
字体系列：Arial；
字号：1em；
}
.navbar ul，a{
保证金：0；
颜色：白色；
溢出：隐藏；
}
李，a{
文字装饰：无；
显示：内联块；
填充：10px；
背景：黑色；
}
李娜：停下来{
背景颜色：蓝色；
}
李{
列表样式类型：无；
浮动：左；
}

黑暗的网站模板乔丹男爵





< /代码> 稍微调整你的悬停规则，同时考虑<代码> a < /C>元素：

li:hover, li:hover a {
    background: blue;
}


正文{
保证金：0；
字体系列：Arial；
字号：1em；
}
.navbar ul，a{
保证金：0；
颜色：白色；
溢出：隐藏；
}
李，a{
文字装饰：无；
显示：内联块；
填充：10px；
背景：黑色；
过渡：.7s；
}
李：悬停，李：悬停a{
背景：蓝色；
}
李{
列表样式类型：无；
浮动：左；
}

黑暗的网站模板乔丹男爵
















在没有任何作用的悬停之前删除空格。

确实没有。Joseph Young我在回答中提到过你。@YashJain它为一个平淡的状态更改添加了一个很好的触感：）

* {
margin: 0;
padding: 0; 
} 

.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
 }
.menu {
background: #093;
} 
.menu ul { 
margin-left: 0; 
list-style: none;
text-align: center; 
} 
.menu ul li {
display: inline-block;
 }


.menu ul li a { 
display: block;
padding: 10px;
color: #CC0; 
text-decoration: none;
 } 
.menu ul li a:hover { 
background: #C30;
color: #FFF; 
} 

<div class="wrapper">
  <div class="menu"> 
   <ul>
    <li><a href="">HOME</a>  
     </li> 
      <li><a href="">CONTACT</a> 
      </li>
     <li><a href="">ABOUT</a> 
   </li>
  </ul>
</div>