Question

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

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

我是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

应该为.button:hover而不是.button: hover

.button {
  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;
  cursor: pointer;
  outline: none;
}

.button:hover {
  background-color: green;
}

<li class="button">
  <a href="#aboutus">about us</a>
</li>

Answer 2

在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;
 }

.button:hover {
     background-color: green;
 }

 <li class="button">
    <a  href="#aboutus" >about us</a>
 </li>

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

2 个答案: