Создание эффекта :hover в стиле тега <a> CSS: примеры

Быстрый ответ

Эффект псевдокласса :hover можно имитировать с помощью JavaScript и обработки событий мыши:

<div onmouseover="this.style.color='blue'" onmouseout="this.style.color='initial'">Наведите курсор!</div>

При наведении курсора, цвет текста этого элемента изменится с исходного на синий.

Совместимость inline-стилей и псевдоклассов: обзор

Псевдоклассы, такие как :hover, не применимы в контексте inline-стилей, поскольку они предполагают динамическое изменение стилей в ответ на действия пользователя.

Разбираемся в роли псевдоклассов

Псевдоклассы, включая :hover, предоставляют возможность динамического изменения стилей на основе взаимодействия пользователя с интерфейсом, что недоступно при использовании inline-стилей, даже если технически это возможно в соответствии со спецификацией CSS.

Подробнее об этом расскажет наш спикер на видео

Внешние таблицы стилей: стандартный подход

При создании эффектов наведения внешние таблицы стилей позволяют разделить HTML (контент) и CSS (стили), что упрощает управление и масштабирование проектов.

Inline-стили: необычное решение, а не стандарт

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

Создание динамических эффектов наведения: практическое руководство

Создавайте динамические эффекты наведения с помощью JavaScript и CSS-классов согласно следующему руководству:

Обработка событий в JavaScript и использование CSS-классов

Примените CSS-классы и переключайте их при наступлении событий наведения курсора мыши:

element.addEventListener('mouseover', function() {
  this.classList.add('hovered'); // При наведении курсора добавляется класс с эффектом наведения.
});
element.addEventListener('mouseout', function() {
  this.classList.remove('hovered'); // При убирании курсора эффект убирается.
});

Релевантный CSS код может выглядеть так:

.hovered {
  color: blue;
}

Анимация и переходы в CSS

Для создания более сложных эффектов наведения применяйте анимацию и переходы в CSS:

.btn {
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: blue;
}

Такой код осуществит плавное изменение цвета кнопки при наведении курсора.

Будущее inline-стилей в контексте спецификации CSS

Несмотря на то что будущие спецификации W3C могут предусматривать поддержку inline-псевдоклассов, рекомендуется придерживаться проверенных и надёжных методов и практик.

Полезные материалы

1. :hover – CSS: каскадные таблицы стилей | MDN — Подробное объяснение псевдокласса CSS :hover от MDN Web Docs.
2. CSS :hover Selector — Примеры и обучающие материалы по использованию селектора :hover от W3Schools.
3. :hover | CSS-Tricks – CSS-Tricks — Исследование эффектов наведения с примерами на CSS-Tricks.
4. How To Create Image Hover Overlay Effects — Руководство по созданию эффектов при наведении на изображение от W3Schools.
5. Использование CSS-переходов — CSS: каскадные таблицы стилей | MDN – Руководство по плавным CSS-переходам от MDN Web Docs.
6. Встречаем псевдоклассы | CSS-Tricks – CSS-Tricks — Руководство по ЦСС псевдоклассам и элементам на CSS-Tricks.
7. ":hover" | Can I use... Support tables for HTML5, CSS3, etc — Таблица поддержки браузеров для псевдокласса :hover на Can I Use.