关于css:div-hover-时设置-border出现抖动如何解决

38次阅读

共计 288 个字符,预计需要花费 1 分钟才能阅读完成。

问题形容

给 div 增加以下款式

div:hover {border: 1px solid red;}

当鼠标挪动到 div 时,产生抖动或偏移。

起因

给 border 时设置了 1px 边框,多出的这 1px,与其它元素产生了挤压,导致 div 抖动或偏移。

解决办法

办法 1: 给 div border 色彩设置为背景色

div {
  background: #aaa;
  border:1px solid #aaa;
  
  &:hover {border: 1px solid red;}
}

办法 2: 给 div border 色彩设置为通明

div {
  border:1px solid transparent;
  
  &:hover {border: 1px solid red;}
}

正文完
 0