如何用一段CSS代码实现hover指定ID时多ID文本变白？

你原来的代码问题出在选择器结构上——单独写的#txtMore没有和#txtBurgerista:hover关联，所以它会一直保持白色，而非仅在hover状态下生效；同时你只指定了#txtFitGreen，遗漏了其他需要变色的元素。

下面提供两种可行方案：

方案1：逐个指定目标ID #

适合需要精准控制单个元素的场景，明确列出所有要变色的ID：

#txtBurgerista:hover ~ #txtFitGreen,
#txtBurgerista:hover ~ #txtNinjas,
#txtBurgerista:hover ~ #txtReinhartshuber,
#txtBurgerista:hover ~ #txtLakhis,
#txtBurgerista:hover ~ #txtIndigo,
#txtBurgerista:hover ~ #txtMore {
  color: white;
}

方案2：用通用兄弟选择器简化代码 #

如果所有需要变色的元素都是#txtBurgerista的后续兄弟（HTML结构里排在它之后），可以直接用通用兄弟选择器~选中所有后续<h2>，无需逐个写ID：

#txtBurgerista:hover ~ h2 {
  color: white;
}

这种方式更简洁，后续新增同类型元素时，无需修改CSS就能自动继承效果。

效果验证 #

替换原有CSS后，鼠标悬停在"Burgerista"文本上时，后面所有<h2>都会变成白色，移开鼠标后恢复初始状态。

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