@Soul1

Как правильно прописать масштабирование текста при наведении курсора?

Задал масштабирование текста через transform: scale(1.1), но при наведении на него курсора блок с текстом хоть и масштабируется, но сдвигается вниз, т.е. расширяется вправо, влево и вниз, а сверху будто упирается в ограничение.

CSS
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Caveat&display=swap')

div a {
    display: block;
    text-align: center;
}

div {
    display: block; /* Объявляем, что блок с меню - это именно блок */
    text-align: center;
    background-color: red;
}

div a {
    border: 1px solid #000; /* Рамка вокруг текста */
    padding: 3px; /* Поля вокруг текста */
    border-radius: 10px; /* Скругление углов блока */
    background-color: #9DC9EB; /* Цвет фона */
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
    font-family: 'Balsamiq Sans', cursive;
}

a:hover {
    color: #FFFFFF; /* Изменение цвета текста на белый при наведении на него курсора */
    display: inline-block;
    transform: scale(1.1);
}

HTML
<div class="menu">
    <a class="menu1" id="main" href="http://127.0.0.1:8000/">Меню1</a>
    <a class="menu1" id="about" href="http://127.0.0.1:8000/about">Меню2</a>
    <a class="menu1" id="rules" href="http://127.0.0.1:8000/rules">Меню3</a>
</div>
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
@cheeroque
Перенесите display: inline-block в стили к div a и поставьте точку с запятой после импорта шрифта, а то сейчас у вас первое правило вообще не работает:

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@maxhd
При ховере устанавливается display, может сразу его установить?
div a {
    display: inline-block;
   /*....*/
}
a:hover {
    transform: scale(1.1);
   /*....*/
}
Ответ написан
Ваш ответ на вопрос

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

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