Проблема с псевдоклассом hover

Question

Пытаюсь создать hover эффект на странице.Суть такова - при наведении курсора на ссылку,фон позади нее должен стать черным с внутренними отступами в 10 пикселей с каждой стороны.Все работает,но при наведении курсора на ссылку,между ней и другими ссылками создается отступ.Как сделать так,чтобы не создавалось отступа между ссылками,когда наводишь на них курсор?

Answer 1

Задайте отступы изначально, при hover меняйте только фон

body {
  display: flex;
  justify-content: center;
}
a {
  padding: 10px;
  text-decoration: none;
}
a:hover {
  background: black;
}

<nav>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</nav>

БЛОГ НА HUSL

Проблема с псевдоклассом hover

Ответы (1 шт):