Создайте эффект подчеркивания при наведении для текста на веб-сайтах

  1. Наведение CSS. Вы можете использовать каскадные таблицы стилей (CSS), чтобы применить эффект подчеркивания при наведении курсора мыши на текст. Этого можно добиться, нацелившись на конкретный элемент или класс и добавив правило CSS с помощью псевдокласса :hover.

Пример кода CSS:

.hover-underline:hover {
  text-decoration: underline;
}
  1. Обработчики событий JavaScript. Вы также можете использовать JavaScript для обработки событий мыши и динамического применения эффекта подчеркивания. Прикрепив прослушиватели событий к текстовому элементу, вы можете обнаружить, когда на него наведен курсор мыши, и соответствующим образом изменить стиль текста.

Пример кода JavaScript:

const textElement = document.getElementById('myText');
textElement.addEventListener('mouseover', function() {
  this.style.textDecoration = 'underline';
});
textElement.addEventListener('mouseout', function() {
  this.style.textDecoration = 'none';
});
  1. Переходы CSS. Чтобы добавить эффект плавного перехода при появлении или исчезновении подчеркивания, вы можете использовать переходы CSS. Указав продолжительность перехода и функцию плавности, подчеркивание может анимироваться, когда указатель мыши наводит курсор на текст или покидает его.

Пример кода CSS:

.hover-underline {
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}
.hover-underline:hover {
  text-decoration: underline;
}

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