Как убрать «скачок» при появлении рамки у элемента?

Question

[JackShcherbakov]

Здравствуйте! При наведении у элемента появляется border, в следствие чего, элемента некрасиво опускается вниз на ширину рамки. Как быть? Почему-то box-sizing не помогает.

Answer 1

[Матвей Правосудов]

Задать на обычное состояние белую рамку такой же толщины, а на ховер другого цвета.

Comments

[JackShcherbakov]

Эмм... Фон-то может поменятся, например, на картинку.

[Матвей Правосудов]

JackShcherbakov, тогда прозрачным.

[JackShcherbakov]

Матвей Правосудов, Да, я уже понял. Спасибо!

Answer 2

[Николай Шабалин]

.block {
  border: 10px solid transparent;
}

.block:hover {
  border-color: red;
}

https://codepen.io/aurfon/pen/ZvqdxG

Answer 3

[Aleksey Chernikov]

Сделать бордер в обычном состоянии прозрачным. При наведении менять border-color

Answer 4

[garmon85]

можно при ховере сделать отрицательный margin на ширину border