css：字母hover文字加粗，盒子变宽，导致文字列表抖动

最新推荐文章于 2023-10-08 20:46:55 发布

呼呼~~

最新推荐文章于 2023-10-08 20:46:55 发布

阅读量2.9k

点赞数

分类专栏： css 文章标签： css jquery html

本文链接：https://blog.csdn.net/weixin_50535566/article/details/119996246

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何通过CSS伪元素`:before`修复在鼠标悬停(:hover)状态下元素出现抖动的问题。通过设置`content: attr(title)`，`font-weight:bold`，`height:0`，`overflow:hidden`和`visibility:hidden`，可以在不改变布局的情况下显示元素的`title`属性，从而避免了因内容变化导致的布局抖动。

摘要由CSDN通过智能技术生成

解决：使用伪元素


<div 
   className="search-list-item" 
   title='aksjk'>
      aksjk
</div>

// css 样式
.search-list-item {
  height: 36px;
  
  &:hover {
    background: #4285f4;
    color: #ffffff;
    font-weight: 500;
  }
  // 为元素修复抖动
  &::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}