使用 :hover 伪类和 font-weight 属性可实现文字悬停加粗，1. 默认设 font-weight: normal；2. .text:hover 中设 font-weight: bold；3. 可添加 transition 实现平滑过渡，注意字体需支持对应字重。
要实现CSS元素在悬停时文字加粗，可以通过 :hover 伪类配合 font-weight 属性来完成。默认情况下文字为正常粗细，鼠标移入时变为加粗，移出后恢复，整个过程无需JavaScript，纯CSS即可实现。
基本语法结构
使用 :hover 选择器定义鼠标悬停状态下的样式，通过设置 font-weight 的值来控制文字粗细变化。
常见 font-weight 取值：- normal：正常字体粗细（相当于 400）
- bold：加粗（相当于 700）
- 数值形式：如 400、500、600、700 等，数字越大越粗
示例代码
以下是一个简单的按钮文字悬停加粗效果：
<style>
.text {
font-weight: normal;
transition: font-weight 0.3s ease; /* 可选：添加平滑过渡 */
}
<p>.text:hover {
font-weight: bold;
}
</style></p><p><p class="text">将鼠标放上来，文字会变粗</p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/992" title="阿里妈妈·创意中心"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680267675436.jpg" alt="阿里妈妈·创意中心" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/992" title="阿里妈妈·创意中心">阿里妈妈·创意中心</a>
<p>阿里妈妈营销创意中心</p>
</div>
<a href="/ai/992" title="阿里妈妈·创意中心" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>添加过渡效果更自然
直接切换 font-weight 可能显得生硬，加入 transition 可使加粗过程更流畅。
推荐写法：- 在原始状态设置 transition，而不是 hover 中
- 使用 ease 或 ease-in-out 缓动函数提升体验
注意事项
某些字体可能不支持所有 font-weight 数值，导致加粗无效。建议使用系统常用字体或确保自定义字体包含对应字重文件。
如果字体本身只有 normal 和 bold 两种字重，中间值如 500 将不会生效或被自动映射。
基本上就这些，不复杂但容易忽略细节。
