Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

При наведении css: CSS: Hover — эффекты при наведении

:hover — CSS — Дока

Кратко

Секция статьи «Кратко»

Хорошим паттерном в сайтостроении считается реакция элементов на действия пользователя. Например, если на элемент можно нажать, то при наведении курсора его стили должны немного меняться, как бы говоря пользователю «Нажми меня!»

Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover.

Пример

Секция статьи «Пример»

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

.link {  color: #000;  text-decoration: none;}.link:hover {  color: pink;  text-decoration: underline;}
          .link {
  color: #000;
  text-decoration: none;
}
.link:hover {
  color: pink;
  text-decoration: underline;
}

Как пишется

Секция статьи «Как пишется»

После любого селектора ставим двоеточие и пишем ключевое слово hover.

Селектор по тегу в состоянии

:hover Секция статьи «Селектор по тегу в состоянии :hover»
a:hover {  /* Стили */}
          a:hover {
  /* Стили */
}

Селектор по классу в состоянии

:hover Секция статьи «Селектор по классу в состоянии :hover»
.link:hover {  /* Стили */}
          .link:hover {
  /* Стили */
}

Составной селектор в состоянии

:hover Секция статьи «Составной селектор в состоянии :hover»
li .link:hover {  /* Стили */}
          li .link:hover {
  /* Стили */
}

Селектор по id в состоянии

:hover Секция статьи «Селектор по id в состоянии :hover»
#id:hover {  /* Стили */}
          #id:hover {
  /* Стили */
}

Селектор по классу и его псевдоэлемент в состоянии

:hover Секция статьи «Селектор по классу и его псевдоэлемент в состоянии :hover»
.link::before:hover {  /* Стили */}
          . link::before:hover {
  /* Стили */
}

Как понять

Секция статьи «Как понять»

Браузер подставляет любому элементу, на который наводится курсор, пометку в виде автоматически создаваемого класса. Мы можем стилизовать этот класс на своё усмотрение, при этом сама логика и механизм отслеживания наведения курсора будут скрыты под капотом движка браузера.

Подсказки

Секция статьи «Подсказки»

💡 :hover можно очень круто анимировать, добавив в блок кода свойство transition 🎉

💡 На наведения курсора может реагировать абсолютно любой элемент, необязательно ссылка или кнопка.

💡 Если дизайнер не нарисовал в макете разные состояния, либо просите у него это сделать, либо пропишите стили на своё усмотрение. Но любой элемент, на который можно нажать, должен иметь как минимум стили для :hover.

На практике

Секция статьи «На практике»

Дмитрий Волков советует

Секция статьи «Дмитрий Волков советует»

💡 А что если на сайт зайти с планшета, к которому подключена bluetooth-мышь? Однозначно, ховер должен работать! А если дополнительных устройств ввода нет, то, конечно, стили по наведению должны быть сброшены, чтобы избежать визуального залипания при нажатии на соответствующие элементы.

Вот удобная практика для таких случаев, она ещё и позволяет писать чуточку меньше кода.

🛠 Чтобы не писать дополнительные обнуления ховер-стилей для тач-устройств, состояние

:hover удобно задавать внутри медиавыражений с условием по типу взаимодействия с устройством.

Пример, исключающий тач-устройства, но не полностью:

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  transition: background-color 0.5s linear;}/* Есть возможность навести указатель на элемент */@media (any-hover: hover) {  .link:hover {    background-color: #2E9AFF;    transition: background-color 0.1s linear;  }}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  transition: background-color 0.5s linear;
}
/* Есть возможность навести указатель на элемент */
@media (any-hover: hover) {
  .link:hover {
    background-color: #2E9AFF;
    transition: background-color 0.1s linear;
  }
}
Открыть демо в новой вкладке

🎁

Условие any-hover: hover допускает устройства с сенсорным экраном, но только если подключено дополнительное устройство ввода с нужной функциональностью для ховера (мышь, тачпад и т.

п.)

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

По аналогии можно использовать и другое состояние — :active.

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть.

Хорошая практика — сбрасывать :hover стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут залипать — телефон не знает, когда вы отводите палец в сторону.

🛠 Сайт смотрится аккуратнее и интереснее, если изменение стилей происходит с лёгкой анимацией, а не резко. Этот принцип взят из окружающего нас мира. Вспомните хоть одно событие, которое происходит резко, моментально, без промежуточных стадий. Не вспомните 😏

Я в своей работе стараюсь делать анимацию стилей для наведения по принципу «появляется быстро, пропадает медленно». Это позволяет пользователю быстро увидеть реакцию на свои действия и не дожидаться окончания анимации.

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  /* Скорость исчезновения фонового цвета */  transition: background-color 0.5s linear;}.link:hover {  background-color: #2E9AFF;  /* Скорость изменения фонового цвета на голубой */  transition: background-color 0.1s linear;}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  /* Скорость исчезновения фонового цвета */
  transition: background-color 0.5s linear;
}
.link:hover {
  background-color: #2E9AFF;
  /* Скорость изменения фонового цвета на голубой */
  transition: background-color 0.1s linear;
}
Открыть демо в новой вкладке

Ссылка быстро (за 0.1 секунды) меняет фоновый цвет на голубой при наведении курсора и чуть медленнее (за 0.5 секунды) приходит обратно в исходное состояние, когда курсор уводится за пределы ссылки.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active.

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

Как добавить рамку к изображению при наведении?

Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover, как показано в примере 1.

Пример 1. Добавление рамки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img:hover { border: 3px solid #65994C; /* Параметры рамки */ border-radius: 10px; /* Радиус скругления */ } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7. png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Изображение с рамкой

Свойство border влияет на общие размеры изображения, из-за чего при наведении на картинку происходит её сдвиг. Есть несколько методов, как обойти эту особенность.

Использование outline

Свойство border заменяем на свойство outline, которое обладает схожим поведением, но не оказывает влияния на размеры (пример 2).

Пример 2. Свойство outline

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img:hover { outline: 3px solid #65994C; /* Параметры рамки */ } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Учтите, что outline всегда выводит прямоугольную рамку, поскольку не поддерживает border-radius.

Прозрачная рамка

Устранить сдвиг картинки поможет прозрачная рамка то же толщины, что указана в border. Картинки предварительно выводим с прозрачной рамкой, а уже в :hover меняем у этой рамки цвет (пример 3). Тогда при наведении на изображение никаких смещений уже не будет. Для прозрачного цвета используем значение transparent, а цвет рамки меняется с помощью свойства border-color.

Пример 3. Прозрачная рамка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img { border: 3px solid transparent; /* Прозрачная рамка */ } img:hover { border-color: #65994C; /* Цвет рамки */ border-radius: 10px; } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Изображение с рамкой

ИзображенияЛинии и рамки

См.

также
  • :focus для полей формы
  • border
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-color
  • border-left-color
  • border-radius
  • border-right-color
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • Добавление треугольника
  • Круглые изображения
  • Открываем блочную модель
  • Повёрнутые рамки
  • Рамка вокруг изображений

: наведите | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Псевдокласс :hover  в CSS выбирает элементы, когда над ними находится курсор мыши. Обычно это связано с элементами ссылки (

).

 а: наведите {
  цвет: зеленый;
  оформление текста: подчеркивание над чертой;
}

Таким образом, когда такая ссылка «зависает» (например, при наведении курсора мыши на устройство):

  com">Перейти в Google

Он станет зеленым, а под ним и над ним появится линия.

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

Browser support

IE Edge Firefox Chrome Safari Opera
All All All All All All
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
Все Все Все
Все		 Все
Источник: caniuse

:соединять

а:ссылка {цвет: #f8a100; }

наведение

: активный

a:активный {цвет: #f8a100; }

наведение

:любая ссылка

.element:любая-ссылка { цвет: красный; }

наведение

:фокус

textarea: focus { фон: розовый; }

наведение

: посетил

a:посещено {цвет: #777; }

наведение

Как использовать CSS Hover эффекты и ролловеры в электронной почте

Разработка электронной почты 10 мая 2022 г.

Хотите сделать электронные письма более интерактивными? Поначалу концепция интерактивных электронных писем может показаться немного пугающей. Но если вы начнете с чего-то простого — например, эффектов наведения CSS — вы на правильном пути.

Хотите узнать, как использовать эффект прокрутки в электронной почте? Вам повезло!

Мой хороший друг и товарищ по электронной почте Ноут Боктор-Смит присоединился ко мне в качестве самого первого гостя в новой веб-серии Email on Acid , Notes from the Dev: Video Edition . Она провела нас через краткое руководство о том, как использовать эффект наведения CSS, чтобы заставить изображения переключаться при наведении курсора.

Что такое

Заметки от Dev ?

Электронная почта на веб-сайте Acid уже более десяти лет является домом для полезных ресурсов по разработке электронной почты. Многие из практических руководств для разработчиков электронной почты в нашем блоге написаны членами сообщества фанатов электронной почты. (Спасибо, кстати!)

Мы хотели привлечь внимание к их изобретательности и творчеству, а также поделиться с вами советами и идеями.

Итак… мы с гордостью представляем Notes from the Dev: Video Edition с вашей ведущей, Меган Бошуйзен (это я). Это продолжение моей ежемесячной колонки, которую вы найдете в информационном бюллетене Email on Acid.

Следите за этим блогом и подпишитесь на канал Email on Acid на YouTube, чтобы получать последние выпуски. В каждом эпизоде ​​будут представлены эксперты по электронной почте, которые покажут вам, как устранять распространенные проблемы с электронной почтой или поэкспериментировать с инновационными идеями для почтового ящика.

Смотреть Первый Эпизод с Ноутом Боктором-Смитом

(Посетите наш Ресурсный Центр, чтобы просмотреть полную расшифровку этого эпизода. ) показать. Она не только мой хороший друг, но и вносит большой вклад в сообщество электронной почты.

Если вы являетесь участником Email Geeks Slack, вы, вероятно, видели ее, потому что она является одним из администраторов группы. Конечно, у Ноута тоже есть дневная работа. В настоящее время она является старшим менеджером по маркетингу жизненного цикла в LaunchDarkly.

Ноут также был экспертом в нашем вебинаре по оптимизации работы с электронной почтой, в котором также приняли участие Гильда Хилер и Шеннон Крэбилл.

В этом руководстве по использованию эффектов наведения в электронной почте в формате HTML Ноут использовала кампанию, которую она разработала для виртуального мероприятия GitLab. Мы выяснили, как сделать так, чтобы это изображение героя менялось при наведении на него курсора подписчика. Это так называемое перевернутое изображение.

Что такое ролловер?

Прокручиваемое изображение так же просто, как и кажется. Это вторичное изображение, которое появляется, когда чья-то мышь наводит на основное изображение.

Это простой эффект, добавляющий электронной почте забавный интерактивный штрих. Перевернутое изображение, вероятно, не то, что ваши подписчики видят в своих почтовых ящиках на регулярной основе. Таким образом, это сделает вашу кампанию более запоминающейся и может повысить вовлеченность по электронной почте.

Оцените сами эффект ролловера ниже:

Как кодировать ролловер-изображения в сообщениях электронной почты

Проще говоря, то, что мы делаем, это включаем некоторый код, который заставляет это главное изображение исчезать при наведении, что показывает второе, альтернативное изображение. Чтобы это произошло, вы можете воспользоваться классом CSS 9.0095 «rollover» и :hover как псевдокласс CSS.

Вот фрагмент кода, который использовал Nout: 

 
  
   jpg">

В приведенном выше коде вы заметите, что два изображения заключены в ссылку, а для max-height альтернативного изображения установлено значение 0px. Это потому, что мы хотим скрыть это изображение до тех пор, пока указатель мыши получателя не наведется на основное изображение.

Отдельный раздел