鼠标悬停时无法修改key-selector文字及边框颜色的问题求助

解决方案 #

修改你的CSS，添加以下规则：

.button:hover .key-selector {
  color: white;
}

如果需要同时确保内部span元素也同步变色（虽然默认会继承父元素颜色），也可以写成：

.button:hover .key-selector,
.button:hover .key-selector span {
  color: white;
}

常规写法无效的原因 #

1. 触发逻辑错误 #

你写的key-selector:hover只有当鼠标直接悬停在.key-selector元素自身时才会生效，但你的需求是鼠标悬停在父元素.button上时改变文字颜色，这个选择器的触发条件和需求不匹配。

2. 样式优先级覆盖 #

.button:hover设置的color:white是父元素的样式，.key-selector作为子元素本应继承这个颜色，但你给.key-selector单独设置了color: #333——直接作用在元素上的内联/类样式优先级远高于继承来的样式，所以父元素的白色被覆盖，无法生效。

完整修改后的核心CSS片段：

.button:hover {
  background-color: rgb(77, 55, 120);
  opacity: 0.65;
  color: white;
}

/* 新增的关键规则 */
.button:hover .key-selector {
  color: white;
}

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