動態添加邊框時防止元素移動

Question

在我的代碼中，將鼠標懸停在元素上時，它們周圍會出現一個紅色邊框。 當您將鼠標移出時，邊框將被刪除。

如您所見，當您使用多層陶瓷板時，邊框在增加寬度和高度，因此元素在跳躍。

有沒有辦法防止跳來跳去？

 document.addEventListener("mouseover", eOnMouseOver, true); document.addEventListener("mouseout", eOnMouseOut, true); function eOnMouseOver(e) { e.target.style.border = "2px solid red"; } function eOnMouseOut(e) { e.target.style.border = ""; } 

 <div style="border:1px black solid;">Mouseover me</div> <a href="#">Mouseover me</a> 

Answer 1

就在這里。 您必須使用box-sizing: borde-box以及供應商前綴來實現此目的。 這是我的意思：

 document.addEventListener("mouseover", eOnMouseOver, true); document.addEventListener("mouseout", eOnMouseOut, true); function eOnMouseOver(e) { e.target.style.outline = "2px solid red"; } function eOnMouseOut(e) { e.target.style.outline = ""; } 

 * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; } 

 <div style="border:1px black solid;">Mouseover me</div> <a href="#">Mouseover me</a> 

但是，在這種情況下，您無需使用javascript。 改用CSS偽類，如下所示：

 * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-sizing: border-box; -ms-sizing: border-box; -o-sizing: border-box; } *:hover { outline: 2px solid red; } 

 <div style="border:1px black solid;">Mouseover me</div> <a href="#">Mouseover me</a> 

Answer 2

當鼠標懸停在邊框上添加顏色時，分配透明邊框

 div, a { border: 1px solid transparent; } div:hover, a:hover { border-color: red; } 

 <div>Mouseover me</div> <a href="#">Mouseover me</a> 

Answer 3

function eOnMouseOver(e) {
  e.target.style.border = "2px solid red";
  e.target.style.marginLeft = "-2px";
  e.target.style.marginTop = "-2px";
}

function eOnMouseOut(e) {
  e.target.style.border = "";
  e.target.style.marginLeft = "";
  e.target.style.marginTop = "";
}

試試看 邊距偏移量應將元素向上和向左拖動邊框所推動的2像素，從理論上講，保持元素穩定。 未經測試。

編輯：另一個解決方案是執行以下操作...

function eOnMouseOver(e) {
  e.target.style.border = "2px solid red";
}

function eOnMouseOut(e) {
  e.target.style.border = "2px solid transparent";
}

然后，只需將eOnMouseOut（e）函數中的邊框應用於基本元素，這樣它就不會在第一個mouseOver上反彈。

Answer 4

改用盒子陰影怎么樣？ 它不會影響您的布局，僅是視覺效果，並且可以保持div的border屬性不變：

 document.addEventListener("mouseover", eOnMouseOver, true); document.addEventListener("mouseout", eOnMouseOut, true); function eOnMouseOver(e) { e.target.style.boxShadow = "0 0 0 2px red"; } function eOnMouseOut(e) { e.target.style.boxShadow = "none"; } 

 <div style="border:1px black solid;">Mouseover me</div> <a href="#">Mouseover me</a>