动态添加边框时防止元素移动

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>