非前端专业人士,最近客串前端开发,遇到一个 hover 特效导致抖动的问题,网上搜索了一下,一般都说的是 hover 添加 border 时会抖动,但我的情况并非如此。经过反复检查测试,发现是 before 伪类的问题。
出问题的 Css 和 Html 代码如下,重点就是 .sound 的 before 伪类和 hover,要实现鼠标 hover 时,图标和文字标题的颜色都发生变化。效果实现了,但是鼠标第一次放上去的时候,偶尔会抖动一下。
.news-list li .sound:before{content:url(../images/sound-filling-fill.png)} .news-list li a,.news-list li span{font-size:14px} .news-list li:hover a{color:#e8381f!important} .news-list li:hover .sound:before{content:url(../images/sound-filling-fill-orange.png)} <li class="border-bottom py-2 d-flex align-items-start"> <li class="border-bottom py-2 d-flex align-items-start"> <i class="sound"></i> <a class="text-dark flex-grow-1 pl-1" href="https://www.02405.com" >新闻标题</a> <span>05-19</span> </li>
解决办法就是不使用 content 属性来设置图标,改为使用 background 来实现,这样就不会抖动了,修改后的 Css 代码如下:
.news-list li .sound:before{ background:url(../images/sound-filling-fill.png); content:""; height:20px; width:20px; display: block; } .news-list li a,.news-list li span{font-size:14px} .news-list li:hover a{color:#e8381f!important} .news-list li:hover .sound:before{background:url(../images/sound-filling-fill-orange.png)}