CSS通配符hover效果在CodePen正常运行但本地及服务器不生效

故障原因及排查方案 #

1. 缺失.sr-only类的标准样式导致子元素遮挡按钮
   你代码中按钮内部的<span class="sr-only">是屏幕阅读器专属的视觉隐藏类，CodePen的示例中内置了对应的规则，不会占用视觉空间：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

如果你的本地代码没有添加上述规则，span会作为普通行内元素显示，实际占据按钮的可交互区域，鼠标hover时选中的是span而非父级button，因此不会触发button的:hover规则。而focus状态通过键盘导航触发，不受子元素遮挡影响，所以可以正常生效。这是该故障出现概率最高的原因。

2. 高优先级CSS规则覆盖:hover样式
   检查本地代码的全局样式，是否存在针对button、[aria-selected]等选择器的背景色设置，且权重高于.dot-indicators>*:hover。你可以在Chrome DevTools的元素样式面板中，手动勾选:hover状态后查看background-color属性是否被划掉，即可确认是否存在样式覆盖。

3. 开启了移动端设备模拟模式
   Chrome DevTools的设备模拟模式默认是触摸交互逻辑，不会触发hover事件。关闭设备模拟切换到PC视口后即可恢复正常。

4. 父级元素设置了pointer-events: none
   如果.dot-indicators或其任意父级元素设置了pointer-events: none，会阻止所有鼠标事件的接收，导致hover失效，但该属性不会限制键盘focus行为，因此focus样式可以正常生效。检查父级元素的pointer-events属性，确认其为默认值auto即可。

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