如何避免CSS懸停同時應用css邊框與懸停僞類

Question

當我添加邊框到div使用：懸停僞類它創建抖動。如何避免，而不是

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


//in css file 

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

This is plunker link

Answer 1

使用outlineborderhttp://plnkr.co/edit/fijZ4wNazGLlx24gPGqS?p=preview

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

Answer 2

你可以初步確定白色/透明邊框上，然後懸停改變邊框顏色爲灰色。

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

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

Answer 3

您還可以設置透明色下手？那麼這將適用於任何背景顏色？

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

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