Html 悬停时导航栏上的背景颜色更改问题

当鼠标悬停在导航栏上时，我试图改变导航栏的背景色。我能够用这个方法做到这一点 CSS:

但当我完成导航条的样式化时，它因为某种原因停止了工作。你知道为什么吗？PS：我非常了解编码（1周内！）我将非常感谢您对我的代码的任何部分的任何反馈

nav{
宽度：100%；
溢出：隐藏；
保证金：0；
背景色：rgb（80,80,205）；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：15磅；
}
李海军{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
填充：16px；
背景色：rgb（80,80,205）；
文本对齐：居中；
文字装饰：无；
}
导航李a：悬停{
背景色：白色；
背景色：rgba（80,80,205,0.3）；
文字装饰：无；
颜色：黑色；
}

您有两个

背景色

声明

nav li a：悬停{
背景色：白色；
背景色：rgba（80,80,205,0.3）；
文字装饰：无；
颜色：黑色；
}

为li添加悬停

nav{
宽度：100%；
溢出：隐藏；
保证金：0；
背景色：rgb（80,80,205）；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：15磅；
}
李海军{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
填充：16px；
背景色：rgb（80,80,205）；
文本对齐：居中；
文字装饰：无；
}
导航李a：悬停{
背景色：rgba（80,80,205,0.3）；
文字装饰：无；
颜色：黑色；
}
李导航：悬停{
背景色：#fff；
}

将您的悬停CSS更改为

nav li a:hover {
  background-color: white;
  color: rgb(80, 80, 205);
  text-decoration: none;
}

在代码中

nav li a:hover {
  background-color: white; // First bg declaration
  background-color: rgba(80, 80, 205, 0.3); // Second bg declaration
  text-decoration: none;
  color: black;
}

背景色给出两次。所以需要第二个

去掉那个

nav{
宽度：100%；
溢出：隐藏；
保证金：0；
背景色：rgb（80,80,205）；
边框：1px实心rgb（80,80205）；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：15磅；
}
李海军{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
填充：16px；
背景色：rgb（80,80,205）；
文本对齐：居中；
文字装饰：无；
}
导航李a：悬停{
背景色：白色；
颜色：rgb（80,80,205）；
文字装饰：无；
}

是否要更改整个导航栏的颜色？当前

nav li a:hover

将使链接更改颜色。如果您希望导航栏更改颜色，请尝试将行为添加到

nav:hover

中，效果很好。但是，

rgba（）

值与紫色相同，因此您无法看到它。

nav li a:hover {
  background-color: white; // First bg declaration
  background-color: rgba(80, 80, 205, 0.3); // Second bg declaration
  text-decoration: none;
  color: black;
}