css 对div用hover设置border,出现抖动和div走位问题,解决方法

样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移。
产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移。
解决方法:

第一种方法:是先将这个div设置一个跟背景颜色一样的边框,比如背景颜色为#aaa;那么你先设置这个div的样式:div {border:1px solid #aaa;},然后再设置hover动作,div:hover { border:1px solid red;}。

第二种方法:将这个div的border颜色设置为透明 

div {border:1px solid transparent;},

然后再引入hover动作

div:hover { border:1px solid red;}
原文地址:https://www.cnblogs.com/pengfei25/p/11404840.html