首页 > 其他分享 >CSS对盒子hover时设置border导致盒子内元素发生位移的解决方法

CSS对盒子hover时设置border导致盒子内元素发生位移的解决方法

时间:2022-12-11 17:34:57浏览次数:50  
标签:hover 盒子 solid 1px border CSS

学习CSS时发现:当我想要鼠标移到某个盒子显示border边框线时,却发现盒子内的元素会发生位移和错位

原因:显示border时边框线会占用原有盒子空间,所以会导致挤压盒子内的元素,产生位移

解决方法:定义盒子大小时就设置border,让边框线隐藏或者和背景一个颜色

li{
    width: 205px;
    height: 300px;
    border: 1px solid transparent;
    /* 或者 */
    /*border: 1px solid 你的背景色; */
}

li:hover{
    border: 1px solid rgb(33, 209, 176);
}

这样就可以完美解决,记录一下

标签:hover,盒子,solid,1px,border,CSS
From: https://www.cnblogs.com/qzzzz/p/16973947.html

相关文章