css解决font-weight:blod跳动问题的解决

互联网   12-04 16:37:28   作者:魏永_Owen_Wei   我要评论

本篇文章主要介绍了css-解决font-weight:blod跳动问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求:实现鼠标悬停在链接上时,链接字体加粗的功能。

实现方式1:

a:hover{font-weight:blod}

结果鼠标悬停的时候,页面会有跳动的现象。因为改变字体的时候改变了元素的大小,所以引起了页面的重排,所以会有跳动的现象。

实现方式2:

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

效果对比:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • CSS 动画实现动态气泡背景的方法

    这篇文章主要介绍了CSS 动画实现动态气泡背景的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-24
  • css中引入svg来兼容部分安卓机显示0.5px边框的示例

    这篇文章主要介绍了css中引入svg来兼容部分安卓机显示0.5px边框的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-22
  • CSS理解块级格式上下文(BFC)

    BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理
    2018-02-22
  • ES6与canvas实现鼠标小球跟随效果

    这篇文章主要介绍了ES6与canvas实现鼠标小球跟随效果的相关资料,需要的朋友可以参考下
    2018-02-11
  • CSS水平垂直居中解决方案(6种)

    这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-10
  • css实现右侧固定宽度 左侧宽度自适应

    这篇文章主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域
    2018-02-09
  • 使用css与js生成的唯美炫酷的图形树效果

    这篇文章给大家分享一个使用css与js生成的唯美炫酷的图形树效果,具体实例代码大家参考下本文
    2018-02-09
  • CSS实现优惠券边沿打孔效果

    本文给大家分享使用纯css写的一个边沿打孔效果,需要的朋友参考下
    2018-02-08
  • css Flex布局的可伸缩性(Flexibility)

    这篇文章主要介绍了css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-07
  • CSS :befor :after 伪元素的巧妙用法

    本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形,感兴趣的朋友一起看看吧
    2018-02-07

最新评论