элемент ссылки css прыгает при наведении

Question

Я пытаюсь поместить границу вокруг ссылки при наведении курсора, и стиль применяется к ней, но он переходит (элемент переходит), когда я нахожу над ним ... что я могу сделать?код:

  .navigation li:hover {
   border: 1px solid #ccc;
 }

Answer 1

Ваш 'прыжок' вызван высотой границы в 1px, которая заставляет вашего li двигаться

Вместо этого вы можете использовать

 .navigation li:hover {
   border-color: #ccc;
 }

 .navigation li {
   border: 1px solid #<parentBackgroundColor/transparent>;
 }

.Таким образом, граница находится здесь с самого начала, поэтому не стоит прыгать при наведении, и она невидима, поскольку она того же цвета, что и родительский контейнер, или прозрачная.

Answer 2

.navigation li {
    border: 1px solid transparent;
}

Вы можете добавить прозрачный border, когда вы не зависаете, тогда он не будет прыгать.

Или вы можете удалить 2px по вертикали padding вокруг элемента, например:

.navigation li {
    padding: 10px
}
.navigation li:hover {
    padding: 9px;
    border: 1px solid #ccc;
}