盒子添加:hover属性时内容出现抖动(原因和解决办法)

一、原因

问题:想要设置盒子添加:hover属性时就显示边框的效果,但盒子里的内容会出现明显的抖动。

盒子添加:hover属性时内容出现抖动(原因和解决办法)_第1张图片

原因:box-sizing: border-box;属性引起,当一个盒子使用了box-sizing: border-box;属性,不管你设置边框、内边距,都是计算在盒子的宽高内,所以由于:hover属性突然插入一个border就会导致盒子里的内容重新调整位置,而出现视觉上的抖动。

二、解决方案

先给盒子设置一个n像素和透明色的边框,在鼠标经过盒子后再设置一个n像素和想要的颜色的边框;

n像素:例如你想要鼠标经过盒子显示一个10像素的边框,那么这个n就为10。

 div {
      width: 200px;
      height: 200px;
      margin: 10px auto;
      /* 先设置盒子边框颜色为透明 */
      border: 10px solid transparent;
      background-color: pink;
    }

    div:hover {
      /* 鼠标经过盒子再设置为想要的颜色 */
      border: 10px solid red;
    }

盒子添加:hover属性时内容出现抖动(原因和解决办法)_第2张图片

说白了就是先设置一个看不见的边框占着位置,需要它显示颜色的时候再设置颜色。

你可能感兴趣的:(前端,CSS,前端,css3)