求助：鼠标悬停元素时修改关联span的背景与文字颜色的CSS实现

没问题，这个需求用纯CSS就能轻松搞定，不用额外写JavaScript~核心是利用**:hover伪类结合后代选择器**来触发样式变化。

实现思路 #

你要的效果是当鼠标悬停在.row容器上时，修改它内部两个span的样式：

• 给.row添加:hover状态，通过后代选择器选中.menu-settings-img和.menu-settings-title，分别设置悬停时的背景色和文字颜色。

完整CSS代码示例 #

/* 先设置元素的初始样式（可根据你的需求调整） */
.menu-settings-img {
  background-color: #ffffff; /* 初始背景色 */
  transition: background-color 0.3s ease; /* 可选：添加过渡动画，让颜色变化更平滑 */
}

.menu-settings-title {
  color: #333333; /* 初始文字颜色 */
  transition: color 0.3s ease; /* 可选：添加过渡动画 */
}

/* 鼠标悬停在.row容器时的样式 */
.row:hover .menu-settings-img {
  background-color: #007bff; /* 替换成你想要的悬停背景色 */
}

.row:hover .menu-settings-title {
  color: #007bff; /* 替换成你想要的悬停文字颜色 */
}

关键说明 #

• .row:hover表示当鼠标悬停在拥有row类的容器上时，触发后续选择器的样式。
• 后面的.menu-settings-img和.menu-settings-title是.row的后代元素（不管嵌套多少层，只要在.row内部都能被选中），所以会同步应用悬停样式。
• 如果你的结构里这两个span被其他元素（比如你的<a id="link-settings">）包裹，这个选择器依然有效。如果需要更精确的选择，也可以写成.row:hover #link-settings .menu-settings-img，不过一般情况下后代选择器已经足够。

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