Stop objects from shifting while easily applying a border

Question

Stop objects from shifting while easily applying a border

I have a code that adds a red border around elements when you mouseover them and removes it when you mouseout.

However, the elements jump around when the border is added because it changes their dimensions. Is there a way to stop this jumping behavior?

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>

javascript html css

Answer 1

Answer №1

Indeed, there is a solution for this. To achieve the desired effect, you can utilize box-sizing: border-box along with vendor prefixes. Here's an example to clarify:

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;">Hover over me</div>
<a href="#">Hover over me</a>

Alternatively, you can achieve the same effect without using JavaScript by utilizing CSS pseudo-classes, like so:

* {
  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;">Hover over me</div>
<a href="#">Hover over me</a>

Answer 2

Indeed, there is a solution for this. To achieve the desired effect, you can utilize box-sizing: border-box along with vendor prefixes. Here's an example to clarify:

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;">Hover over me</div>
<a href="#">Hover over me</a>

Alternatively, you can achieve the same effect without using JavaScript by utilizing CSS pseudo-classes, like so:

* {
  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;">Hover over me</div>
<a href="#">Hover over me</a>

Answer 3

Answer №2

Have you considered using a box shadow instead? This can have no impact on your layout, is purely aesthetic, and preserves the border property of your div:

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;">Hover over me</div>
<a href="#">Hover over me</a>

Answer 4

Have you considered using a box shadow instead? This can have no impact on your layout, is purely aesthetic, and preserves the border property of your div:

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;">Hover over me</div>
<a href="#">Hover over me</a>

Answer 5

Answer №3

Set a transparent border on an element, and change the border color to red when it is hovered over

div,
a {
  border: 1px solid transparent;
}

div:hover,
a:hover {
  border-color: red;
}

<div>Move mouse over me</div>
<a href="#">Move mouse over me</a>

Answer 6

Set a transparent border on an element, and change the border color to red when it is hovered over

div,
a {
  border: 1px solid transparent;
}

div:hover,
a:hover {
  border-color: red;
}

<div>Move mouse over me</div>
<a href="#">Move mouse over me</a>

Answer 7

Answer №4

function onMouseEnter(e) {
  e.currentTarget.style.border = "2px solid red";
  e.currentTarget.style.marginLeft = "-3px";
  e.currentTarget.style.marginTop = "-3px";
}

function onMouseLeave(e) {
  e.currentTarget.style.border = "";
  e.currentTarget.style.marginLeft = "";
  e.currentTarget.style.marginTop = "";
}

Give it a shot. The margin adjustment should help keep the element in place when applying the border. This approach has not been tested yet.

UPDATE: Another alternative is to try this method...

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

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

Then, set the border in the onMouseLeave(e) function to prevent jittering on the initial hover event.

Answer 8

function onMouseEnter(e) {
  e.currentTarget.style.border = "2px solid red";
  e.currentTarget.style.marginLeft = "-3px";
  e.currentTarget.style.marginTop = "-3px";
}

function onMouseLeave(e) {
  e.currentTarget.style.border = "";
  e.currentTarget.style.marginLeft = "";
  e.currentTarget.style.marginTop = "";
}

Give it a shot. The margin adjustment should help keep the element in place when applying the border. This approach has not been tested yet.

UPDATE: Another alternative is to try this method...

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

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

Then, set the border in the onMouseLeave(e) function to prevent jittering on the initial hover event.

Stop objects from shifting while easily applying a border

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The value of a Vue.js directive expression is consistently found to be undefined

Simulating dynamic route parameters in the Next 13 application directory

Can anyone recommend a high-quality jQuery lightbox replica?

Which specific jQuery functionality was made visible?

Mobile view div failing to fill remaining space

What is the best method to remove the x and up/down arrow components of an input date field?

Issue with cancelling a file upload is not functioning properly on Internet Explorer

Only one instance of a div with a table cell will function properly

Ensuring security against cross site scripting attacks on window.location.href

Retrieving and transforming data from a JSON format using Regular Expressions

Organizing your code with precision

When the user clicks, show a designated search result in a separate container

Storing JavaScript variables in a database: A step-by-step guide

Enhancing UI-Grid: Implementing Dynamic Field Addition in the Header Name Section

Is there a way to modify the log() function to handle multiple arguments?

Utilizing Vue.js to incorporate the isActive property to the class name within a v-for loop, along with implementing dynamic class names

Update the document by sending the data and making changes based on the AJAX response

drag and drop feature paired with additional textarea below

Encountering a 404 error in a Next.js application while utilizing path parameters

Can you suggest the best HTML5 structure for a multi-chapter novel?