Как исправить ширину у ссылок при :hover?
Cсылки из коротких слов занимают ширину ссылки самого длинного слова, из-за это при наведении на ссылки с короткими словами возникает ошибка - наводишь на пустое пространство рядом с ними, а :hover у них уже срабатывает, как это исправить?
<div class="footer-top__nav"> <div class="footer-top__nav__links"> <a href="">Услуги</a> <a href="">О компании</a> <a href="">Сертификаты</a> <a href="">Отзывы</a> <a href="">Полезные материалы</a> <a href="">Благотворительность</a> </div> </div> |
<div class="footer-top__nav"> <div class="footer-top__nav__links"> <a href="">Услуги</a> <a href="">О компании</a> <a href="">Сертификаты</a> <a href="">Отзывы</a> <a href="">Полезные материалы</a> <a href="">Благотворительность</a> </div> </div>
.footer-top__nav{ flex: 0 1 30%; } .footer-top__nav__links { display: inline-flex; flex-direction: column; gap: 20px; } .footer-top__nav__links a{ font-size: 14px; font-weight: 700; line-height: 120%; color: #fff; } .footer-top__nav__links a:hover{ cursor: pointer; text-decoration: 2px underline dotted #4F8FF0; } |
.footer-top__nav{ flex: 0 1 30%; } .footer-top__nav__links { display: inline-flex; flex-direction: column; gap: 20px; } .footer-top__nav__links a{ font-size: 14px; font-weight: 700; line-height: 120%; color: #fff; } .footer-top__nav__links a:hover{ cursor: pointer; text-decoration: 2px underline dotted #4F8FF0; }
Дополнительно:
Посмотрите как лучше верстать навигацию https://www.youtube.com/watch?v=y52rtbUeCac&list=P...
Заодно и эта проблема отпадет.
Добавьте свойство align-items. Так как по умолчанию у него указано stretch, которое в данном случае означает, что дочерние элементы flex-контейнера будут занимать всю его ширину.
.footer-top__nav__links { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 20px; } |
.footer-top__nav__links { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 20px; }
- Ёкарный бабай, ну да, flex-direction: column же поменял главную ось, так что теперь align-items тут решает, спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения ширины ссылок при наведении на них мы можем использовать псевдоэлемент :hover в комбинации с CSS свойством transform. Ниже приведен пример кода на CSS, который позволит изменить ширину ссылки при наведении на нее:
a { transition: all 0.3s ease; } a:hover { transform: scaleX(1.5); }
В данном примере мы используем transition для создания плавного эффекта изменения ширины ссылки при наведении на нее. Свойство transform с функцией scaleX увеличивает ширину элемента в 1.5 раза при наведении курсора на ссылку.
Вы также можете настроить другие свойства, такие как цвет фона, размер шрифта и т.д., чтобы дополнительно улучшить внешний вид ссылок при :hover. Например, вы можете добавить следующее:
a:hover { transform: scaleX(1.5); background-color: #f0f0f0; color: #333; }
Этот код изменит цвет фона и цвет текста ссылки при наведении на нее, что сделает ее более заметной для пользователей.
Надеюсь, это поможет вам изменить ширину ссылок при :hover! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.