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

2018-1-13 17:52 来自本站原创 10,559 6 4
[摘要]

要实现鼠标指向后文字加粗的效果最简单的就是加:hover{font-weight:blod}伪类样式,但是会出现文字跳动的效果,该怎么办呢?

给链接加a:hover{font-weight:blod}样式后,鼠标指向该链接时文字会加粗,这是非常常用的一个前端效果。但是这么做会出现一个问题,就是页面有略微的跳动效果。这是因为改变字体的时候改变了元素的大小,所以引起了页面的重排,所以会有跳动的现象。

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

a:hover{font-weight:blod}

那怎么办才能使链接加粗而又保持页面稳定呢?我们可以用CSS3新增样式text-shadow;

a:hover{text-shadow: 1px 0 0 currentColor;}

然后你会发现鼠标指向链接,链接加粗而页面没有变化,如下效果

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

可惜的是当前IE9以及之前版本并不支持这个CSS3新样式...大家根据自己的项目实际情况选择吧

本文最后更新于2018年6月21日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:6   其中:访客  0   博主  0
    加载中...
    1. 6年前 (2018-01-15) 0楼

      非常不错!!!!

    2. 6年前 (2018-01-13) 0楼

      页面跳动?因为行距不够造成的,我还真没遇到过诶。一般我把行距定到足够的话,没出现过页面跳动

      • Wing
        6年前 (2018-01-15)  地下1层

        @西枫里博客: 本文所指的页面跳动是指鼠标指向文字时,文字加粗导致文字总长度加长而出现右侧文字瞬间位移的“跳动”情况,跟行距没有什么关系的。

    3. 6年前 (2018-01-13) 0楼

      [鼓掌] 这个功能还是非常实用了,涨知识了

      • Wing
        6年前 (2018-01-15)  地下1层

        @懿古今: 很常用的一个效果,不处理好这个加粗跳动的效果,可能会造成页面布局的暂时变形

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 6 4 10,559
    Top