Как пофиксить баг с font-weight при наведении?

Ссылка скопирована
CSS HTML
1 ответ

У меня появилась проблема связанная с ссылкой в navbar'e: при наведении на текст он становится менее жирным, хотя в css это нигде не прописано.
код:

.element {     text-decoration: none;     font-weight: 400;     font-size: 1.125rem;     color: #fff;     position: relative;     transition: .1s; }  .element:hover {     color: #f00; }

.element { text-decoration: none; font-weight: 400; font-size: 1.125rem; color: #fff; position: relative; transition: .1s; } .element:hover { color: #f00; }

html:

<a href="/rules" class="element">     <span>Правила</span> </a>

<a href="/rules" class="element"> <span>Правила</span> </a>

Дополнительно:

Покажите скриншоты

  • А лучше живой пример на codepen.io
    Пока делаете, найдете в чем дело.
  • https://codepen.io/worldlight009/pen/eYXXbqG
  • я нашел изза чего возникает данная проблема, дело в том что в хедере в css установлена высота, изза этого во всех остальных на сайте случилась такая проблема, когда закомментировал height у этого блока все стало нормально работать, с чем это может быть связано
    UPD: так же даже если не устанавливать высоту но в блоке при этом будут любые элементы будет тот же самый баг, как это связано?
  • Ankhena, я залил код на codepen.io
  • GR么ND, я бы разбиралась с backdrop-filter
  • Ankhena, а что с ним не так?

    • Ответы:

    У меня не возникает такая проблема, это чисто визуально, если ты поставишь цвет изначальный на зеленый, а ховер на белый, то белый будет типа больше, но нет. В итоге жирность не меняется, цвета играются просто

    • хорошо, спасибо, но как это исправить в моем прошлом хедере тоже был похожий навбар и там все с этим было в порядке на шрифте Oswald с белого на красный менялся все было нормально, но тут даже с этим шрифтом так происходит
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Алексей Денисов Ответ

    Для исправления проблемы с font-weight при наведении на элемент, можно использовать CSS псевдокласс :hover в комбинации с font-weight: normal; или font-weight: bold; в зависимости от требуемого эффекта.

    Пример для текста, который становится жирным при наведении:

    .element:hover {
  font-weight: bold;
}

    .element:hover { font-weight: bold; }

    Пример для текста, который становится обычным при наведении:

    .element:hover {
  font-weight: normal;
}

    .element:hover { font-weight: normal; }

    Также, если у вас есть проблемы с наследованием стилей, убедитесь, что ваш стиль применяется к нужному элементу. Может быть полезно явно указать селектор для элемента, чтобы избежать конфликтов стилей.

    Если после применения этих рекомендаций проблема все еще остается, проверьте другие стили, которые могут перезаписывать стиль font-weight при наведении. Убедитесь, что нет других правил CSS, которые могут повлиять на font-weight в различных состояниях элемента.

    Надеюсь, эти советы помогут вам исправить проблему с font-weight при наведении на элемент на вашем сайте.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Linux Как диагностировать зависание RK3568 U-boot на Starting kernel? 1 ответ