Задать вопрос
@BavarianBeer

Почему не работает анимация и элементы блока(при наведении)становятся слишком огромными и переставляют друг друга?

https://jsfiddle.net/z0nq4rj7/1/
Почему не работает анимация и элементы блока(при наведении)становятся слишком огромными и переставляют друг друга?

Как мне добиться того чтобы наведенная ссылка становилась больше и при этом не двигала другие ссылки? хелп.
  • Вопрос задан
  • 131 просмотр
Подписаться 1 Простой Комментировать
Ответ пользователя Евгений Сальников К ответам на вопрос (2)
@kroobeet
Познаю просторы Web разработки
<ul class="menu-categories">
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Квадроциклы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Катера</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Гидроциклы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Лодки</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Вездеходы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Снегоходы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Двигатели</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Запчасти</a>
    </li>
  </ul>


.menu-categories {
    width: 1600px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    background: #F0F0F4;
    height: 40px;
    align-items: center;
}
 
li {
    font-weight: 600;
    align-items: center;
}
 
li:last-child {
    border: none;
}
 
li a {
    font-size: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-decoration: none;
    color: #2F3035;
    display: flex;
    width: 200px;
    transition: 0.2s;
}
 
li a:hover {
    font-size: 30px;  /* меняй вот это значение  */
    border-bottom: solid 4px #1C62CD;;
    transition: 0.1s;
}


UPD: Стили не все соблюдены, сорянчег) на скорую руку накидал. Проверь код и посмотри, чего ты лишнего туда набросал и что можно было изменить. И не торопись с работой по классам. Поработай для начала с тегами, если всё ок - назначай классы. С тегами проще. Названия классов могут быть громоздкими, как у тебя - от этого можно и запутаться. Начинай всегда с малого и успехов тебе ;-)
Ответ написан
Комментировать