无法将悬停属性应用于 css 中的完整类

Question

我想在悬停时突出显示整个类元素。但我无法实现它。这就是正在发生的事情。

在按钮悬停时，只有标签的背景颜色发生变化，但我提供了选择器作为“按钮”类。这里出了什么问题？如何在悬停时更改按钮类（整个 li 项）的背景颜色？

我是 Web 开发的新手，将不胜感激。

.button {

  height: fit-content;

  width: 150px;

  padding: 20px;

  margin: 20px;

  text-align: center;

  background-color: gray;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 20px;

  color: white;

  float: left;

  border: 1px solid #ff0023;

}

.button :hover {

  background-color: green;

}

<li class="button">

  <a href="#aboutus">about us</a>

</li>

Answer 1

css 中的按钮和悬停之间不应该有空格。希望这会帮助你。.button {height: fit-content;width: 150px;padding: 20px;margin: 20px;text-align: center;background-color: gray;font-family: Arial, Helvetica, sans-serif;font-size: 20px;color: white;float: left ;border: 1px solid #ff0023;&nbsp;}.button:hover {&nbsp; &nbsp; &nbsp;background-color: green;&nbsp;}&nbsp;<li class="button">&nbsp; &nbsp; <a&nbsp; href="#aboutus" >about us</a>&nbsp;</li>