鼠标指向文字加粗font-weight:blod样式导致跳动怎么办

• • 腾讯云建站教程
  • 宝塔面板建站教程
  • 老薛主机建站教程
  • SiteGround建站教程

给链接加 a:hover{font-weight:blod} 样式后，鼠标指向该链接时文字会加粗，这是非常常用的一个前端效果。但是这么做会出现一个问题，就是页面有略微的跳动效果。这是因为改变字体的时候改变了元素的大小，所以引起了页面的重排，所以会有跳动的现象。那怎么办才能使链接加粗而又保持页面稳定呢？我们可以用 CSS3 新增样式 text-shadow；

然后你会发现鼠标指向链接，链接加粗而页面没有变化，可惜的是当前 IE9 以及之前版本并不支持这个 CSS3 新样式…大家根据自己的项目实际情况选择吧。

以上内容整理自@雅兮网

本文地址：https://boke112.com/article/p4714.html