Пытаюсь создать hover эффект на странице.Суть такова - при наведении курсора на ссылку,фон позади нее должен стать черным с внутренними отступами в 10 пикселей с каждой стороны.Все работает,но при наведении курсора на ссылку,между ней и другими ссылками создается отступ.Как сделать так,чтобы не создавалось отступа между ссылками,когда наводишь на них курсор?
-
Или сделать padding изначально с прозрачным фоном или подкладывать цветную подложку из псевдоэлемента с абсолютным позиционированием. Выложите код нормально, как код– Talleyran31 авг 2020 в 17:38
Добавить комментарий
|
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>