处理不定宽的横向列表hover后抖动问题

jinlinglee
1,244 阅读2分钟

在实践中遇到的一个问题，就是在鼠标hover时，如果将原来的字体变大，或者变粗之后，会增加宽度，导致所在区域整体抖动，给人一种很不好的体验。针对这个问题，做了一些尝试。

主要是不想用定位之类的，就想着是否有一种更简洁的方式，查来查去，还真被我找到了。嘿嘿~

下面进入正题，看代码

当然了，我这是拿来的vue编译后的代码

<ul class="tabCont-title-box flex">
  <li class="active">智能机器人</li>
  <li>区块链</li>
  <li>智能风控</li>
  <li>金融云</li>
  <li>风控</li>
  <li>屏端应用生态</li>
  <li>SAAS产品</li>
</ul>

页面的效果是这样的

这时，在列表上添加一个鼠标hover的效果，hover后将文字变大，颜色变为白色，css代码如下

li:hover { color: #fff; font-size: 16px;}

但是，真正放上去发现，效果是这样的

确实，颜色变了，大小也变了，但是整个列表不停的抖动，这完全是不合格呀！！

那么，就需要进一步优化了，我最后决定用的是伪类的方式，我用的是::after

li::after{ display:block; content:'attr(title)'; font-size: 16px; visibility:hidden;}

但这时，html部分也需要稍微修改下，新增了一个title属性，以便于在after里使用

<ul class="tabCont-title-box flex">
 <li title="智能机器人" class="active">智能机器人</li>
 <li title="区块链">区块链</li>
 <li title="智能风控">智能风控</li>
</ul>

测试一下，大功告成。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

手动分割线

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

纠正一下，上面的写法只能满足文字较少的情况，文字多起来就还是会有抖动…

看到没有！！最后一个SAAS产品，如果去掉几个字就可以不抖动，但是，事情不可能按照你想得来发展，所以，我们只能去配合它，满足它。

下面，我有一个投机取巧的办法，就是使用 transform: scale() 这个也可以达到放大的效果，然后，还不会有抖动~耶

li:hover { 
 color: #fff; 
 transform: scale(1.2);
}
li.active { 
 background: #fff; 
 color: #2c68ff; 
 font-size: 16px;
}

但，事情怎么可能这么简单呢！！看吧，又出问题了

本来呢都挺好，最后一个也可以不抖了，但是，鼠标放到active的li上，顿时…功亏一篑的感jio。可以，我可是打不倒的打工人呢！想想，css中有一个not选择器，那就用起来吧

li:not(.active):hover { 
 color: #fff; 
 transform: scale(1.2);
}
li.active { 
 background: #fff; 
 color: #2c68ff; 
 font-size: 16px;
}

这次，再看！！

终于！！！效果达到了。完美~

除此之外，就是用定位的方法了，这个就留给大家自己思考吧。

avatar
文章
阅读
粉丝