CSS Hover效果异常：父元素hover时未触发自身背景色变更

你的问题出在CSS选择器的写法上：.buttonHorizontal :hover里的空格是关键错误——这个选择器的意思是选中.buttonHorizontal下的所有子元素，当这些子元素被悬停时应用样式，所以才会出现只有悬停子div才变色，且只改子div背景的情况。

要实现父div悬停时修改自身背景色，只需要把选择器里的空格去掉，改成.buttonHorizontal:hover，这样就是监听父元素本身的悬停状态：

修改后的Buttons.module.css代码：

.buttonHorizontal {
  background-color: #ffffff2c;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  padding: 10px 25px;
}
/* 去掉选择器里的空格，直接监听父元素的hover */
.buttonHorizontal:hover {
  background-color: #ffffff98;
}
.text {
  font-size: 1.3rem;
  font-weight: 900;
  display: inline;
  padding-left: 10px;
}

这样修改后，鼠标悬停在父div（包括子div区域）时，父div的背景色就会切换成#ffffff98了。

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