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

Question

In my code, when you mouseover elements, a red border will appear around them. When you mouseout, the border is removed.

As you can see, when you do mousoevers, the elements are jumping around as the border adds width and height to it.

Is there a way to prevent the jumping around?

 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

Yes, there is. You must use box-sizing: borde-box together with vendor prefixes to achieve this. Here is what I mean:

 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> 

However, you do not need to use javascript in this case. Use CSS pseudo-classes instead, like this:

 * { 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

assign a transparent border, when mouse over add color to the border

 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 = "";
}

Try that. The margin offset should pull the element up and left by the 2px your border is pushing, theoretically keeping the element stable. Untested.

EDIT: Another solution would be to do the following...

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

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

Then simply apply the border in the eOnMouseOut(e) function to the base element so it doesn't bounce on the first mouseOver.

Answer 4

How about using a box shadow instead? It does not influence your layout, is purely visual and keeps the border property of your div intact:

 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>