如何在使用hover伪类应用css边框时避免css抖动

Question

当我使用：hover伪类向div添加边框时，它会创建抖动。如何避免

<div class="mybox">
</div>


//in css file

.mybox:hover{
   border:1px solid gray;
}

This is plunker link

Answer 1

您最初可以设置白色/透明边框，然后在悬停时将边框颜色更改为灰色。

.mybox {
  border: 1px solid white
}
.mybox:hover {
  border-color: gray;
}

<div class="mybox">
  <p>This is text</p>
</div>

Answer 2

使用outline代替border http://plnkr.co/edit/fijZ4wNazGLlx24gPGqS?p=preview

.mybox:hover{
outline: #00FF00 solid thick;
}

Answer 3

您还可以设置透明色开头？那么这适用于任何背景颜色吗？

＆＃13;

＆＃13;

.mybox {
  border: 1px solid rgba(0,0,0,0);
}
.mybox:hover {
  border-color: gray;
}

＆＃13;

<div class="mybox">
  <p>This is text</p>
</div>

＆＃13;

＆＃13;

＆＃13;