用hover显示border的时候,出现div抖动或移动的情况

起初不给div边框,当用div:hover再给边框时,div盒子就会出现抖动或移动。
div { width: 200px; height: 200px; background-color: pink; } div:hover { border: 10px solid purple; }
。这是出现边框时对盒子挤压造成的运动,边框宽度小的时候,就是抖动效果。
假如不想让盒子抖动,可以在起初的div盒子给一个透明的边框。
如 div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid transparent;
}
这样就不会抖动了。

原创文章 22 获赞 4 访问量 2590

猜你喜欢

转载自blog.csdn.net/tuzi007a/article/details/105605982