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

王小优
王小优
王小优
231
文章
0
评论
2015年12月1日 评论 1,607 389字阅读1分17秒

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

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

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

  1. a:hover{font-weight:blod}

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

  1. a:hover{text-shadow1px 0 0 currentColor;}

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

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

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

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
利用animation动画实现呼吸灯效果 CSS3

利用animation动画实现呼吸灯效果

阿里云看到其Banner上的一个呼吸灯效果,利用animation来实现的动画效果。 在阿里云看到其Banner上的一个呼吸灯效果,感觉非常具有科技感,看了下源码,原来只是一个CSS3效果,利用ani...
用CSS3给按钮添加类似雷达扫光效果 CSS3

用CSS3给按钮添加类似雷达扫光效果

如今的Web前端技术层出不穷,大家所看的网页也从原来的简单刻板的风格逐步演变为绚丽多特效的“现代化”效果了,今天就用CSS3给一个按钮添加类似雷达扫光的效果。 如今的Web前端技术层出不穷,大家所看的...
纯CSS制作像素风史蒂芬·乔布斯 CSS

纯CSS制作像素风史蒂芬·乔布斯

都知道CSS3很强大,但你见过用几个标签加上纯CSS做的画么?下面就让我们看下用纯CSS画出来的乔布斯,太牛了! 先让我们看一下效果,虽然是像素风小人,但我们似乎还是能从人物的轮廓中隐约看出来这是苹果...
利用CSS3制作跳动音乐频谱跳动效果 CSS3

利用CSS3制作跳动音乐频谱跳动效果

CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。 在一个网站上看到“直播中”的提示标题,有趣的是文字之前有一个图表,是...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: