出現(xiàn)抖動現(xiàn)象背后的原因

比如你可能會遇到這樣的場景，就是有一個div塊，當(dāng)鼠標(biāo)懸浮的時候，需要添加一個border（比如多個div塊以卡片的形式排列起來）。你可能會考慮寫成這樣的CSS：

div:hover { border: 1px solid blue }

但是這樣寫會導(dǎo)致一個問題，就是div塊之間比如說間距是3px，這時候加了一個border，間距可能會變成4px。div塊之間間距突然拉大（比如說那種多個卡片場景），從視覺上來看就好像頁面的div塊間發(fā)生了抖動。你可能會考慮使用box-sizing: border-box來解決這個問題，這個時候如果content里沒有東西還好，如果有內(nèi)容，突然增加的border也會導(dǎo)致內(nèi)容發(fā)生一點(diǎn)抖動現(xiàn)象。

對于這個抖動問題的解決原則就是讓各個塊或者內(nèi)容之間的距離始終保持不變，距離不變就不會發(fā)生抖動。如何讓距離保持不變呢？可以先用transparent這個特性來做一個占位。

一個簡單場景

簡單場景是之前沒有border，懸浮或者點(diǎn)擊之后添加border。可以寫成這樣：

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

更復(fù)雜的場景

現(xiàn)在考慮一個更復(fù)雜的場景，剛開始有一個邊框是1px，你希望鼠標(biāo)懸浮之后邊框變成3px。比如類似于這樣，要求邊框是有圓角的：

這時候就沒有辦法通過transparent來解決這個問題了，因為邊框是始終存在的，只是粗細(xì)發(fā)生了變化。這個問題的一個比較容易的解決方案是通過box-shadow來構(gòu)造多重邊框，對于內(nèi)部邊框先transparent，然后鼠標(biāo)懸浮時再顯示。特別的在MDN文檔中有這么一段內(nèi)容：

If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

所以，我們用box-shadow時并不需要擔(dān)心圓角問題，它會繼承過來。考慮使用inset，像這樣：

如果想在之前的邊框里面加一個邊框，做成多重邊框，可以寫成這樣：

box-shadow: inset 0 0 0 10px gold;

最后，你只需要將內(nèi)邊框提前設(shè)置好，并將顏色設(shè)置為transparent，當(dāng)鼠標(biāo)懸浮時將其設(shè)置為和外邊框一樣的顏色，就可以解決抖動問題了。

參考資料

[1] css 對div用hover設(shè)置border，出現(xiàn)抖動和div走位問題，解決方法
[2] box-shadow
[3] CSS3實(shí)現(xiàn)多重邊框的方法總結(jié)

總結(jié)

以上是生活随笔為你收集整理的CSS设置样式时，鼠标移动到div上，发生抖动问题解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。