Css 正在尝试使悬停过渡对背景alpha起作用

我试图在导航按钮周围出现一个彩色圆圈。CSS现在看起来像这样：

.nav-btn {
  line-height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: rgba(70, 48, 70, 0);
}
.nav-btn :hover {
  background-color: rgba(70, 48, 70, 1);
  transition: background-color;
  transition-duration: 1s;
}

。。。当我悬停时看起来是这样的：

我是不是完全走错了路

---

我更喜欢只使用html和css的答案，因为我还没有学会javascript。

你的错误在于悬停。应该是

。导航btn:hover

而不是

。导航btn:hover

这样做应该可以解决悬停问题。

这两个：

之间应该没有空格。导航btn:hover

完全解决了这个问题。非常感谢你！