N_Elena
@N_Elena

Сужаются icons при наведении мышки на меню (a:hover), как исправить?

Здравствуйте, с наступившим новым годом!

Задача сделать topmenu - (градиент, лого и меню) как в макете design (https://cloud.mail.ru/public/LeC9/Qw5mVfrr3)
Проблема: при наведении #topmenu a:hover, сужаются icons.
Код: https://cloud.mail.ru/public/wQVM/CckWsVMnM
Выяснила, что это происходит из-за дополнительных параметров в #topmenu a:hover:
border-left: 1px solid #545454;
border-right: 1px solid #545454;

Пробовала, указать в #topmenu a:
border-left: 1px solid translate;
border-right: 1px solid translate;

5ff2007fe5bea217571529.jpeg
  • Вопрос задан
  • 29 просмотров
Решения вопроса 1
N_Elena
@N_Elena Автор вопроса
Получилось подогнать используя box-shadow
#topmenu a:hover {
border-bottom: 4px solid #d38a01;
box-shadow: 0px 0px 1px #545454; }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
neuotq
@neuotq
Прокрастинация
border - влияет на геометрию(ширину и высоту) элемента, поэтому чтобы убрать эффект вам нужно либо задать border у элемента изначально(без наведения), пусть будет прозрачным:
#topmenu a {
// ...
 border-left: 1px solid transparent;
 border-right: 1px solid transparent;
}

Либо заменить border на трюк с псевдоэлементами(before и after) задав им соответствующие дизайну стили, либо поиграться со свойством background.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы