如何在父链接hover时仅改变子类加粗文本颜色？（纯CSS方案）

没问题！纯CSS完全能实现你要的效果，而且写法非常直观。

解决方案代码 #

直接给你的链接添加hover状态下的子元素选择器即可：

/* 当鼠标悬停在整个链接上时，修改.bold类文本的颜色 */
a:hover .bold {
  color: #ff4500; /* 替换成你想要的目标颜色 */
}

原理说明 #

你的HTML结构里，<a>标签已经包裹了图标、普通文本和加粗文本，所以当鼠标悬停在链接的任意区域（不管是图标、"learn more"还是加粗的"about me"），整个<a>元素都会触发:hover状态。

上面的CSS选择器a:hover .bold的作用就是：当<a>处于hover状态时，选中它内部所有带有.bold类的子元素，然后修改这些元素的文本颜色——完全符合你“仅改变加粗部分颜色”的需求，不需要任何JavaScript。

可选优化（确保其他元素样式不变） #

如果你想确保链接里的其他内容（比如图标、"learn more"文本）在hover时保持原有样式，可以给它们设置默认样式，避免继承意外的颜色：

/* 设置链接默认文本颜色 */
a {
  color: #333;
  text-decoration: none; /* 可选，去掉默认下划线 */
}

/* 确保图标hover时样式不变（如果是图片图标，无需额外滤镜的话可忽略） */
a img {
  display: inline-block; /* 可选，让图标和文本对齐更美观 */
  vertical-align: middle;
}

这样调整后，整个链接区域hover时，只有.bold类的文本会变色，其他内容完全保持原样，完美匹配你的作品集网站需求。

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