多行图片div设置hover属性显示边框出现div错位的解决办法

时间:2024-03-13 11:16:40

在写HTML时遇到多行图片设置div的hover属性显示边框。当鼠标移动到div时候会把下面的内容挤出去(如图)

多行图片div设置hover属性显示边框出现div错位的解决办法

可以看到下面的div被挤出去了

原因是因为  设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移。

解决办法是先给div设置一个跟背景颜色相同的固定边框,比如我这个是白色背景,那么我就设置该div的border属性为白色

border: 1px solid #fff;

或者是给div设置一个透明的边框

border: 1px solid  transparent;

然后再设置div的hover属性的边框

border: 1px solid #1d1d1d;

这样就不会挤掉了

多行图片div设置hover属性显示边框出现div错位的解决办法