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

在我的代码中，当您将鼠标悬停在元素上时，它们周围会出现一个红色边框。鼠标移出时，边框将被删除

正如您所看到的，当您使用鼠标移动器时，元素会随着边框增加宽度和高度而跳跃

有没有办法防止人们四处乱跳

document.addEventListener（“mouseover”，eonouseover，true）；
文件。添加了监听器（“mouseout”，eOnMouseOut，true）；
功能EOMOUSEOVER（e）{
e、 target.style.border=“2px实心红色”；
}
函数EONMOUT（e）{
e、 target.style.border=“”；
}

鼠标悬停在我身上

试试看。边距偏移应将元素向上拉并向左拉边界推动的2px，理论上保持元素稳定。未经测试

编辑：另一个解决方案是执行以下操作

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

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

---

然后只需将eOnMouseOut（e）函数中的边框应用于基本元素，这样它就不会在第一次鼠标悬停时反弹。

是的，有。必须将

框大小：borde-box

与供应商前缀一起使用才能实现此目的。我的意思是：

document.addEventListener（“mouseover”，eonouseover，true）；
文件。添加了监听器（“mouseout”，eOnMouseOut，true）；
功能EOMOUSEOVER（e）{
e、 target.style.outline=“2px实心红色”；
}
函数EONMOUT（e）{
e、 target.style.outline=“”；
}

*{
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
}

鼠标悬停在我身上

改用方框阴影怎么样？它不影响布局，纯粹是视觉效果，并保持div的border属性不变：

document.addEventListener（“mouseover”，eonouseover，true）；
文件。添加了监听器（“mouseout”，eOnMouseOut，true）；
功能EOMOUSEOVER（e）{
e、 target.style.boxShadow=“0 2px红色”；
}
函数EONMOUT（e）{
e、 target.style.boxShadow=“无”；
}

鼠标悬停在我身上

将鼠标悬停在透明边框上时，为边框添加颜色

div，
a{
边框：1px实心透明；
}
部门：悬停，
a:悬停{
边框颜色：红色；
}

鼠标悬停在我身上

我认为提纲确实是一个好办法！但是盒子的尺寸在这里是完全不相关的…？酷，我不知道有一个轮廓样式！大纲本身满足了我的需要，而框大小虽然与我的问题无关，但也可以包含在内。这可能会起作用，但我将使用

样式。大纲

。谢谢不完全是这样，因为在我的实际工作中，边框将应用于所有元素，而不仅仅是A和DIV。无论如何，

style.outline

就是我想要的。然后你可以使用

outline

css属性和

hover

无需使用javascriptYeah，但对于我正在做的事情，我需要我的应用程序来控制它：-）

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

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