- Наведение CSS. Вы можете использовать каскадные таблицы стилей (CSS), чтобы применить эффект подчеркивания при наведении курсора мыши на текст. Этого можно добиться, нацелившись на конкретный элемент или класс и добавив правило CSS с помощью псевдокласса
:hover
.
Пример кода CSS:
.hover-underline:hover {
text-decoration: underline;
}
- Обработчики событий JavaScript. Вы также можете использовать JavaScript для обработки событий мыши и динамического применения эффекта подчеркивания. Прикрепив прослушиватели событий к текстовому элементу, вы можете обнаружить, когда на него наведен курсор мыши, и соответствующим образом изменить стиль текста.
Пример кода JavaScript:
const textElement = document.getElementById('myText');
textElement.addEventListener('mouseover', function() {
this.style.textDecoration = 'underline';
});
textElement.addEventListener('mouseout', function() {
this.style.textDecoration = 'none';
});
- Переходы CSS. Чтобы добавить эффект плавного перехода при появлении или исчезновении подчеркивания, вы можете использовать переходы CSS. Указав продолжительность перехода и функцию плавности, подчеркивание может анимироваться, когда указатель мыши наводит курсор на текст или покидает его.
Пример кода CSS:
.hover-underline {
text-decoration: none;
transition: text-decoration 0.3s ease;
}
.hover-underline:hover {
text-decoration: underline;
}
Комбинируя эти методы или используя их по отдельности, вы можете добиться эффекта подчеркивания при наведении курсора мыши на текст на веб-сайте.