CSS中无法为.button类添加hover效果，如何实现整个li元素hover高亮？

嘿，刚接触Web开发的话，这个空格的坑确实很容易踩！咱们一步步来拆解问题：

问题出在哪？ #

你写的CSS选择器是：

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

这里的空格是关键错误——这个写法的意思是：选中所有带有.button类元素内部的子元素，当这些子元素被hover时改变背景色。所以只有里面的<a>标签触发了样式变化，而不是整个<li>（.button元素本身）。

怎么解决？ #

把选择器里的空格去掉，写成：

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

去掉空格后，选择器的含义就变成：当带有.button类的元素本身被hover时，改变它的背景色，这样整个<li>就会在hover时高亮了。

优化体验的小建议（可选） #

为了让按钮的点击区域更友好（避免只能点击文字部分），可以给<a>标签加一些样式，让它铺满整个<li>：

.button a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none; /* 去掉默认下划线 */
  color: inherit; /* 继承父元素的文字颜色 */
}

完整修正后的代码 #

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; 
}
/* 修正后的hover选择器 */
.button:hover { 
  background-color: green; 
}
/* 优化a标签的样式 */
.button a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

HTML： #

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

这样操作后，当你hover整个<li>按钮时，整个元素的背景都会变成绿色，而且点击区域也覆盖了整个按钮，体验更好～

内容的提问来源于stack exchange，提问作者Ayyappa Gollu