<div class="s-prose js-post-body" itemprop="text">
<p>Для эффекта наведения вам потребуется CSS. Это связано с тем, что вы <em>стилизуете</em> ваш текст, и именно для этого используется CSS.</p>
<p>Следующий стиль вам понадобится между вашими <code><style></code> и <code></style></code> в заголовке документа <code>head</code>.</p>
<pre class="lang-html prettyprint-override"><code><style>
/ Вот ваши оригинальные стили для элемента (я видел это в комментариях к вашему вопросу) /
a {
text-decoration: none;
color: #808080;
}
/ Вот эффект наведения. Всё, что вы добавляете сюда, применяется к стилю при наведении. /
/ Это похоже на событие onmouseover в javascript, только оно применяется только для стиля. /
a:hover {
color: white;
}
</style>
Поскольку вы перенесли свои стили в CSS-код стилей, вы можете упростить свой HTML-код:
Чтобы добавить эффект изменения цвета для гиперссылки при наведении курсора (hover) в HTML, необходимо использовать CSS (каскадные таблицы стилей). Это один из наиболее эффективных и распространенных способов стилизации элементов веб-страницы.
Шаг 1: Подключение CSS
Ваш HTML-код должен включать раздел для CSS. Вам необходимо открыть элемент <head> в документе HTML, чтобы поместить в него стили. Вот пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ссылка с эффектом наведения</title>
<style>
/* Базовые стили для элементов <a> */
a {
text-decoration: none; /* Убираем подчеркивание */
color: #808080; /* Цвет ссылки по умолчанию */
}
/* Стили для эффекта наведения */
a:hover {
color: white; /* Цвет ссылки при наведении */
transition: color 0.3s ease; /* Плавный переход цвета */
}
</style>
</head>
<body>
<p>Для прослушивания песни перейдите по ссылке:
<a href="https://www.youtube.com/watch?v=HhqWd3Axq9Y" target="_blank">LISTEN</a>
</p>
</body>
</html>
Шаг 2: Структура кода
Элемент <a>: Он использует атрибут href для указания URL, на который ссылка ведет.
CSS для HTML:
Базовые стили применяются к ссылкам, убирая подчеркивание и устанавливая цвет текста в серый.
При наведении курсора за счёт селектора a:hover цвет текста изменяется на белый.
Дополнительное свойство transition создает плавный переход цвета, добавляя анимацию к эффекту наведения.
Важно помнить
Использование атрибута target="_blank" в ссылке открывает ее в новой вкладке, что является хорошей практикой для внешних ссылок, чтобы не отвлекать пользователей от текущей страницы.
Плавный переход помогает улучшить восприятие изменения цвета и делает интерфейс более дружелюбным.
Заключение
С помощью простой настройки CSS вы можете значительно улучшить визуальную привлекательность своей гиперссылки. Такой подход не только делает элементы более интерактивными, но и способствует повышению удобства использования вашей веб-страницы.