свойство border заставляет навигацию двигаться немного

Question

См. Следующее: -

https://romantic-carson-980e19.netlify.com/

Может кто-нибудь подсказать, пожалуйста, как предотвратить незначительное смещение навигационных ссылок при зависании? Это связано с правом границы, но я не могу понять, как это предотвратить. Я попытался сделать границу: ни один в состоянии наведения, я также попытался сделать границу 1 px solid прозрачной как для li, так и для тега a. Я также пробовал поискать в Google, но ничего не могу найти.

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

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

Заранее спасибо.

Answer 1

Добавление границы, где ее не было, приведет к увеличению размера элемента в 2 раза (влево + вправо, сверху + снизу). Ваша граница при наведении прозрачна, так какова цель?

Если вы хотите изменить цвет границы при наведении, начните с прозрачной границы, а затем просто измените цвет границы при наведении:

li a {
  border: 1px solid transparent;
}

li a:hover {
  border-color: white;
}

В качестве альтернативы можно добавить границу и отрицательное поле для его компенсации, например:

li a {
  border: 1px solid white;
  margin: -1px;
}