css元素在悬停时文字加粗如何实现_使用:hover和font-weight调整-css教程-PHP中文网

css元素在悬停时文字加粗如何实现_使用:hover和font-weight调整

P粉602998670

发布： 2025-12-01 17:05:14

原创

478人浏览过

使用 :hover 伪类和 font-weight 属性可实现文字悬停加粗，1. 默认设 font-weight: normal；2. .text:hover 中设 font-weight: bold；3. 可添加 transition 实现平滑过渡，注意字体需支持对应字重。

css元素在悬停时文字加粗如何实现_使用:hover和font-weight调整

要实现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">
                        <a class="aritcle_card_img" href="/ai/1267">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680158098827.jpg" alt="ImagetoCartoon">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1267">ImagetoCartoon</a>
                            <p>一款在线AI漫画家，可以将人脸转换成卡通或动漫风格的图像。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ImagetoCartoon">
                                <span>106</span>
                            </div>
                        </div>
                        <a href="/ai/1267" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ImagetoCartoon">
                        </a>
                    </div>

登录后复制