Применение эффекта hover в инлайн CSS: a:hover для HTML email

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

Воспользуйтесь событиями JavaScript для имитации :hover во встроенных стилях:

<a href="#"
   onmouseover="this.style.backgroundColor='#ffff00'"
   onmouseout="this.style.backgroundColor=''">Наведите на меня!</a>

Фон ссылки при наведении станет жёлтым, а при отведении курсора – вернётся к исходному состоянию.

Делигируем обработку событий наведения JavaScript'у

Встроенные стили не поддерживают псевдоклассы типа :hover. Однако, не беда: мы можем повернуться за помощью к JavaScript, который позволяет создавать динамичные визуальные эффекты.

Основы работы с событиями наведения в JavaScript

Применяя события onmouseover и onmouseout прямо в HTML, мы воссоздаём эффекты, аналогичные :hover:

<span onmouseover="this.style.color='green'"
      onmouseout="this.style.color='initial'">Наведите указатель для смены цвета!</span>

Благодаря событиям JavaScript, страница заметно оживает.

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

Применение эффекта наведения к нескольким элементам

Наиболее эффективное решение наведения для множественных элементов — использовать JavaScript. Он позволяет устанавливать стили для класса элементов одним махом:

function addHoverEffect(className, hoverStyle) {
  var elements = document.getElementsByClassName(className);
  for (var i = 0; i < elements.length; i++) {
    elements[i].onmouseover = function() { this.style.cssText = hoverStyle; };
    elements[i].onmouseout = function() { this.style.cssText = ''; };
  }
}

Чтобы активизировать данный эффект, вызовите функцию с необходимым классом и стилями:

addHoverEffect('hoverable', 'color: red; background: yellow;');

Особенности использования эффектов наведения в HTML-письмах

Применение JavaScript для создания эффектов наведения в HTML-письмах может привести к непредсказуемым результатам. Важно представлять, как письмо будет отображаться на различных платформах. Иногда стоит отдать предпочтение простоте, а не изощрённым эффектам наведения.

Визуализация

Вообразите себе, как мы создаём стили :hover, используя только встроенные CSS. Если представить CSS как "шнурки" на обуви, то JavaScript становится "умёлым роботом-художником".

С помощью классического CSS вы можете заставить цвет шнурков меняться от солнечного света, но с встроенным CSS без поддержки событий у вас есть лишь один цвет.

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

Эффекты наведения невозможно реализовать исключительно с помощью встроенного CSS, без использования внешнего стилевого файла или элемента <style>. А вот с поддержкой "робота" работа начинает прогрессировать!

Использование переменных CSS и JavaScript

Динамические эффекты наведения с помощью переменных CSS

Переменные CSS могут контролироваться с помощью JavaScript, что предоставляет нам новые возможности их применения во встроенном CSS:

document.documentElement.style.setProperty('--hover-color', 'red');

Эффективная работа с DOM

Частое изменение DOM через JavaScript может влиять на производительность. Чтобы этого избежать, вот что вы можете сделать:

document.addEventListener('mouseover', function(event) {
  if (event.target.matches('.hoverable')) {
    event.target.style.backgroundColor = 'red';
  }
});

Таким образом, мы назначаем "ответственного", который следит за всеми эффектами наведения в документе.

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

1. :hover – CSS: Каскадные таблицы стилей | MDN — Профундированное описание псевдокласса :hover.
2. CSS :hover Selector — Понятное описание и примеры использования селектора :hover.
3. :hover | CSS-Tricks – CSS-Tricks — Обзор стилей для эффектов наведения на сайте CSS-Tricks.
4. 'bugtracker.net' tag wiki – Stack Overflow — Обсуждения вопросов, связанных с проблемами псевдоклассов во встроенных стилях.
5. How to Create a Paris Lifestyle Illustration in Sketch | Envato Tuts+ — Глубокий урок веб-дизайна от Tuts+, несмотря на несовпадение названия.
6. CSS Inliner Tool | Email Design Reference — Инструмент от MailChimp для инлайнинга CSS, полезный в частности для дизайна электронных писем.