How to solve the jitter when setting the border when div hovers?

Problem Description

Add the following styles to the div

 div:hover {
  border: 1px solid red;
}

Jitter or offset occurs when the mouse moves over the div.

reason

A 1px border is set for the border, and the extra 1px squeezes with other elements, causing the div to shake or shift.

Solution

Method 1: Set div border color as background color

 div {
  background: #aaa;
  border:1px solid #aaa;
  
  &:hover {
    border: 1px solid red;
  }
}

Method 2: Set the div border color to transparent

 div {
  border:1px solid transparent;
  
  &:hover {
    border: 1px solid red;
  }
}