使用css的:hover伪类和font-weight属性可实现鼠标悬停时文字变粗，通过设置初始font-weight为normal（400），悬停时改为bold（700），并推荐添加transition平滑过渡，确保字体支持多字重以避免失效，还可结合颜色、下划线等增强反馈。
当鼠标悬停在链接上时让文字变粗，可以通过 CSS 的 :hover 伪类结合 font-weight 属性来实现。这种方法简单有效，适用于导航菜单、文章链接等需要交互反馈的场景。
使用 :hover 和 font-weight 基本语法
在 CSS 中，:hover 用于定义元素在被鼠标悬停时的样式，font-weight 用于控制字体的粗细。将两者结合，即可实现悬停时文字加粗的效果。
示例代码：
a { text-decoration: none; color: #333; font-weight: normal; /* 默认不加粗 */ transition: font-weight 0.3s; /* 可选：添加平滑过渡效果 */ } a:hover { font-weight: bold; / 悬停时变粗 / }
注意事项与优化建议
为了让效果更自然或避免布局抖动，可以注意以下几点：
- 如果原本 font-weight 使用的是关键字（如 normal），目标值应使用对应的关键字（如 bold）或数值（如 700）
- 推荐使用数值设置 font-weight，例如 normal 对应 400，bold 对应 700，便于精确控制
- 加入 transition 可使加粗过程更柔和，提升用户体验
- 确保所用字体支持不同字重，否则加粗可能无效
扩展应用：其他文字状态变化
除了加粗，你还可以在 hover 状态下同时改变颜色、下划线、缩放等，增强视觉反馈。
立即学习“前端免费学习笔记（深入）”；
例如：
a:hover { font-weight: 700; color: #007acc; text-decoration: underline; }基本上就这些。只要正确设置初始和悬停状态的 font-weight，并合理利用 :hover，就能轻松实现链接文字悬停变粗的效果。不复杂但容易忽略细节。