Блог

Главная - Вопросы по программированию - Подчеркнутые пункты меню прыгают при наведении курсора

Подчеркнутые пункты меню прыгают при наведении курсора

#html #css #menu #edit #items

#HTML #css #меню #Редактировать #Товары

Вопрос:

Я пытаюсь подчеркнуть пункты меню при наведении курсора. Мой код следующий:

 a:hover {
    color: black;
    border-bottom: 3px solid black;
    padding-bottom: 5px;
}

Когда я использую этот код, меню прыгает при наведении курсора мыши.

Моя страница:

https://www.webpreludi.online/

Как создать эффект подчеркивания только без перехода в меню?

Комментарии:

1. Переместите свойство padding-bottom вверх к селектору привязки. a {заполнение снизу: 5 пикселей;}

Ответ №1:

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

 a {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  border-bottom-color: black;
}  
 <a href="#">test</a>

Комментарии:

1. Спасибо 🙂 простой способ.

Ответ №2:

Используйте text-decoration: underline; в своем CSS и удалите border-bottom и padding-bottom из своего кода.

Комментарии:

1. Спасибо, и можно отредактировать это подчеркивание? изменить толщину линии на 2 пикселя? или я пробую текстовое оформление-толщина: 2 пикселя; но не работает

2. В нескольких браузерах вы можете использовать text-decoration-thickness , но это редко поддерживается. Другим обходным путем было бы использовать box-shadow . Удалите text-decoration: underline; и добавьте box-shadow: inset 0 0 0 white, inset 0 -2px 0 #000000; Используйте цифры, чтобы сделать строку толще.

3. Пожалуйста, мне нужен кто-то для подобных небольших настроек сайта, одна из которых — две или три вещи на страницу. Я был бы в состоянии предоставить финансовое вознаграждение за это. Разве вы не хотели бы сотрудничать? Если да, отправьте мне электронное письмо на info@webpreludi.sk и мы согласны, мне нужна такая микро-модификация и код два раза в неделю, вы скажете мне цену, и я отправлю вам сумму, а затем вы отправите мне код или модификацию. большое вам спасибо за помощь

4. Привет, пожалуйста, можно ли сделать подчеркивание эффективным? Пожалуйста, добавьте эффект линии, чтобы при наведении курсор перемещался слева направо?