Hover html css: :hover — CSS: Cascading Style Sheets

Leave a Comment / Html / By /

Содержание

html — Нужно сделать так чтобы псевдоэлемент не реагировал на hover, CSS

Задать вопрос

Вопрос задан

Изменён 1 год 1 месяц назад

Просмотрен 229 раз

link имеет анимацию появления underline в навигации. При наведении на link, подчеркивание выезжает вверх. Но если курсором успеть навести на эту линию, hover анимация снова срабатывает. Есть ли способ избежать этого и сделать активацию hover только по наведению на ссылку?

body {
  background-color: #e6f0ff
}
ul {
  list-style: none;
}
.header--nav {
  display: flex;
  padding: 38px 0;
  column-gap: 64.5px;
  align-items: center;
}
.nav--list {
  display: flex;
  margin-right: auto;
  column-gap: 30px;
}
. nav--link {
  position: relative;
  font-size: 0.875em;
  font-weight: 500;
  color: #5a6473;
  line-height: 1.3125;
  text-decoration: none;
}
.nav--link:visited {
  color: #5a6473;
}
.nav--link::after {
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #5a6473;
  opacity: 0;
  border-radius: 5px;
  transition: all 0.2s ease-in;
}
.nav--link:hover {
  color: #2d323a;
}
.nav--link:hover::after {
  bottom: -3px;
  opacity: 1;
}
.nav--link:active {
  color: #717d8f;
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Fratures</a></li>
  <li><a href="#">Service</a></li>
  <li><a href="#">Listed</a></li>
  <li><a href="#">Contact</a></li>
</ul>
  • html
  • css
  • navigation
  • псевдоэлемент

2

На тот (псевдо)элемент, который не должен реагировать на мышь:

pointer-events: none;

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

hover ᐈ Довідник CSS ➜ HTML-CSS.

CO.UA

Довідник CSS атрибутів1140

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0 + 8.0 + 1.0 + 4.0 + 1.0 + 1.0 +

Коротка інформація

Застосовується Не визначено
Посилання на специфікацію http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Визначає стиль елементу при наведенні на нього курсора миші, але при цьому елемент ще не активований, іншими словами кнопка миші не було натиснуто.

Синтаксис

елемент: hover {…}

Значення

Ні.

Приклад 1

HTML5 CSS2.1 IE Cr Op Sa Fx

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8"/>
 <title>
 hover </title>
 <style>
 a: link {color: #0000d0; /* Колір посилань */ padding: 2px; /* Поля навколо тексту */ } a: hover {background: #786b59; /* Колір фону під посиланням */ color: #ffe; /* Колір посилання */ } </style>
 </head>
 <body>
 <p>
 <a href="1.html">
 Посилання 1 </a>
 </p>
 <p>
 <a href="2.html">
 Посилання 2 </a>
 </p>
 <p>
 <a href="3.html">
 Посилання 3 </a>
 </p>
 </body>
 </html>

В даному прикладі псевдоклас : hover застосовується до заслання (тегу <a> ), при цьому змінюється колір посилання і фону під нею. Результат прикладу показаний на рис. 1.

Рис. 1. Результат використання псевдокласу: hover для посилань

Приклад 2

HTML5 CSS2. 1 IE Cr Op Sa Fx

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>
 hover </title>
 <style>
 ul {width: 180px; /* Ширина меню */ list-style: none; /* Для списку прибираємо маркери */ margin: 0; /* Ні відступів навколо */ padding: 0; /* Прибираємо поля навколо тексту */ font-family: Arial, sans-serif; /* Рубаний шрифт для тексту меню */ font-size: 10pt; /* Розмір назв в пункті меню */ } li ul {position: absolute; /* Підменю позиціонуються абсолютно */ display: none; /* Приховуємо підміню */ margin-left: 165px; /* Зрушуємо підміню вправо */ margin-top: -2em; /* Зрушуємо підміню вгору */ } li a {display: block; /* Посилання як блоковий елемент */ padding: 5px; /* Поля навколо написи */ text-decoration: none; /* Підкреслення у посилань прибираємо */ color: #666; /* Колір тексту */ border: 1px solid #ccc; /* Рамка навколо пунктів меню */ background-color: #f0f0f0; /* Колір фону */ border-bottom: none; /* Межа знизу не проводимо */ } li a: hover {color: #ffe; /* Колір тексту активного пункту */ background-color: #5488af; /* Колір фону активного пункту */ } li: hover ul {display: block; /* При виділенні пункту курсором миші відображається підменю */ } .
 
 brd {border-bottom: 1px solid #ccc; /* Лінійка знизу */ } </style>
 </head>
 <body>
 <ul>
 <li>
 <a href="russian.html">
 Російська кухня </a>
 <ul>
 <li>
 <a href="linkr1.html">
 Бефстроганов </a>
 </li>
 <li>
 <a href="linkr2.html">
 Гусь з яблуками </a>
 </li>
 <li>
 <a href="linkr3.html">
 Крупеник новгородський </a>
 </li>
 <li>
 <a href="linkr4.html">
 Раки по-російськи </a>
 </li>
 </ul>
 </li>
 <li>
 <a href="ukrainian.html">
 Українська кухня </a>
 <ul>
 <li>
 <a href="linku1.html">
 Вареники </a>
 </li>
 <li>
 <a href="linku2.html">
 Печеня по-харківськи </a>
 </li>
 <li>
 <a href="linku3.html">
 Капусняк чернігівський </a>
 </li>
 <li>
 <a href="linku4.html">
 Потапці з помідорами </a>
 </li>
 </ul>
 </li>
 <li>
 <a href="caucasus.
  html">
 Кавказька кухня </a>
 <ul>
 <li>
 <a href="linkc1.html">
 Суп-харчо </a>
 </li>
 <li>
 <a href="linkc2.html">
 Лілібдж </a>
 </li>
 <li>
 <a href="linkc3.html">
 Чихиртма </a>
 </li>
 <li>
 <a href="linkc4.html">
 Шашлик </a>
 </li>
 </ul>
 </li>
 <li>
 <a href="asia.html">
 Кухня Середньої Азії </a>
 </li>
 </ul>
 </body>
 </html>

В даному прикладі псевдоклас : hover додається до елемента списку (тег <li> ) для створення дворівневого меню. Результат прикладу показаний на рис. 2.

Рис. 2. Використання: hover для створення меню

Браузери

У браузері Internet Explorer до версії 6.0 включно псевдоклас : hover працює лише для посилань.


Теги HTML5

Як заголовок зробити посиланням?

Please enable JavaScript to view the comments powered by Disqus.

98 CSS Hover Effects

Коллекция отобранных бесплатных эффектов HTML и CSS hover примеров кода (анимация, переходы и т. д.) из Codepen, GitHub и других ресурсов. Обновление майской коллекции 2021 года. 30 новых предметов.

  1. Примеры эффектов наведения CSS
  2. Библиотеки CSS для эффекта наведения
  1. Эффекты наведения jQuery
  2. Bootstrap Hover Эффекты

HTML и Эффект наведения CSS примеров кода.

О коде

Cool Frame Hover Effect (только CSS)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Док-станция ОС CSS

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: нет

Зависимости: open-props. css

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Двойное изображение с эффектом наведения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Зигзагообразная рамка и крутой эффект наведения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Взрывающаяся коробка Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Изменение масштаба фигуры

Аккуратный эффект перехода, созданный с помощью маскирования CSS и SVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Переход стирания часов

Знаковый вайп часов из фильмов «Звездные войны», созданный с помощью конической градиентной маски и анимированный с помощью пользовательских свойств CSS.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Переход салфетки Iris

Анимация маски радиального градиента для создания эффекта вытеснения радужной оболочки, как в фильмах «Звездные войны».

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Горизонтальный переход вытеснения

Анимированный горизонтальный вайп сцены, как в фильмах «Звездные войны». Использует градиентную маску CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только CSS Cool Hover Effect

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Обзор эффектов при наведении

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

CSS Только эффект наведения границы

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект наведения только CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Подчеркивание при наведении

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Эффект при наведении курсора мыши

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Крутой эффект парения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Полный CSS эффект растущих точек

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Несколько Hover для одной анимации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация элемента (при наведении курсора)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Кошки Инь и Ян

Направление известно, только CSS, реализация инь и ян обнимающихся кошек. Логика определит, в какую из кошек вошла мышь, и приблизит ее. Нет JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Hover-панели

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект парения профиля команды

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект наведения CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Галерея Hover Эффект

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: нет

Зависимости: —

О коде

Отображение позиции мыши в CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Hover Rays с маскировкой и Houdini Magic

Совместимые браузеры: Chrome, Edge, Opera, Safari

Отвечает: да

Зависимости: —

О коде

О нас Всплывающий эффект

Использование clip-path: path(. ..) для создания всплывающего эффекта.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Кросс-браузерный эффект отсутствия дублирования изображения с Real

изображение Элементы

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Тонкий крест при наведении курсора на углы элемента сетки

Вдохновлен эффектом Windows 10 Fluent Design в приложении «Калькулятор», где при наведении курсора на элемент в углу, ближайшем к курсору, отображается тонкий крестик.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Подчеркнутая анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS Эффект перехода без мыши

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Комбинация узор + фон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Supa Dupa Fly Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только CSS Кнопка с эффектом голограммы 3D Icon

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: нет

Зависимости: —

О коде

Эффект наведения изображения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Взаимодействие с информацией при наведении карты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Карта псевдоэлемента Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

CSS Nugget: стилизация одноуровневых элементов при наведении курсора

Используйте селектор CSS :not , чтобы стилизовать одноуровневые элементы при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Fancy Slide-in Hover Только CSS

Плавный эффект наведения с использованием некоторого позиционирования и псевдокласса. Работает с любым размером.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Искусство бессмысленно

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Радужная аккордеонная анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Полноэкранный фоновый контур Hover Effect 60fps

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект наведения с учетом направления только для CSS

Поставляется с Sass @mixin , так что вы можете быстро изменить количество столбцов и элементов. Кроме того, вы можете изменить размер окна. Он продолжает работать при изменении сетки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация клип-пути при наведении

clip-path анимация наведения, полностью доступная с клавиатуры.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome.css

О коде

Развлечение с :hover

Просто поэкспериментируйте с некоторыми интересными вещами, которые вы можете сделать с помощью CSS :hover при стилизации одних и тех же HTML-элементов (и их братьев и сестер).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Многофункциональная кнопка наведения на плитку

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Соединения CSS Hover FX

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS Наведение FX

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Гладкая и острая

Преобразование эффекта наведения на края в чистом CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Мозаика Электронная коммерция

Элементы сетки электронной коммерции

Tessellations с эффектами наведения.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация в шахматном порядке

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Чистый CSS Box Hover с фоновым эффектом

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Кинетическая магнитная точка

Кинетическая магнитная точка с небольшим количеством JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект наведения для коробок

Эффект наведения для блоков в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css

О коде

Эффект кругового наведения

Эффект наведения круга на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект круговой пульсации при наведении на кнопку

Наведите курсор на каждую из кнопок, чтобы увидеть эффект в действии.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Наведение для информации о продукте

Используемые свойства CSS: filter: drop-shadow() , clip-path: polygon() , CSS Grid.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект парения, как у Super Team Deluxe

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Футуристический 3D-эффект наведения

Используется как навигация, меню или эффект. Он использует CSS , преобразование и перспективу для создания уникального эффекта анимации, похожего на гололинзу. Может использоваться для многих других вариантов использования, у вас, вероятно, будут свои собственные идеи. Это экспериментальная идея, вы можете захотеть конкретизировать ее для использования в производстве.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Показать содержимое карты при наведении

Чистый эффект наведения карты в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: material-icons.css

О коде

Дай мне посмотреть, что у тебя есть!

Эффект наведения для блока с медиаконтентом в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Коробка с волшебным эффектом увеличения

Коробка с анимированным магическим эффектом масштабирования на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимированная коробка с эффектами наведения

Анимированный блок с эффектами наведения в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация углов коробки

Анимация углов коробки при наведении на чистый CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект наведения 3D-изображения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект наведения: всплывающее окно и фоновая анимация

Эффект наведения для товара. Изображение всплывает вверх и вниз, а затем фон выдвигается и анимируется.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект прожектора с радиальным градиентом

Это перо показывает, как можно использовать радиальные градиенты CSS для создания эффекта фокусируемого прожектора.

О коде

Иконки зависают

Красивые эффекты наведения для иконок.

С код

Свободный дизайн: перестроить

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

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

Узнайте, как создать эффект сбоя с помощью CSS clip-path без JS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Адаптивная миниатюра 16/9 и эффект сияния при наведении курсора

Эта миниатюра поддерживает соотношение сторон 16/9 при любом размере. Есть эффект наведения блеска и небольшая анимация при запуске видео. Эффект блеска с использованием переменных CSS, вдохновленных Раулем Дронкой.

О коде

Анимация наведения

Одна div анимация наведения.

Демонстрационный GIF: Привлекайте Hover Effect

Эффект притяжения при наведении

Эффект притяжения при наведении с помощью HTML, CSS и JavaScript.
Сделано Луи Хобрегтсом
6 июля 2017 г.

скачать демо и код

Демонстрационное изображение: Эффект перспективы при наведении на чистом CSS

Эффект при наведении перспективы на чистом CSS

Список блоков с эффектом перспективы.
Сделано Максимом Лафари
6 июля 2017 г.

скачать демо и код

Демонстрационное изображение: Эффект наведения изображения

Эффект наведения изображения

Изображение с эффектом отражения и близости при наведении.
Сделано Тиаго Александр Лопес
2 июня 2017 г.

скачать демо и код

Демонстрационное изображение: Эффекты наведения стопкой карт

Эффекты наведения стопкой карт

Просто поэкспериментируйте с дополнительными переходами CSS и эффектами наведения.
Сделано Кайлом Браммом
17 мая 2017 г.

скачать демо и код

О коде

Hover and Scale Blocks UI Concept — CSS Только для CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Чистое размытие при наведении CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Демонстрационное изображение: CSS 3D Hover

CSS 3D Hover

3D-эффект наведения на чистом CSS для карточек.
Сделано Ахилом Саи Рамом
24 декабря 2016 г.

скачать демо и код

О коде

Поднятые бумажные полоски

Поднятые бумажные полоски (эффект парения).

Демонстрационное изображение: 10 стильных эффектов при наведении с помощью LESS

10 стильных эффектов при наведении с помощью LESS

Небольшая коллекция стильных эффектов с LESS.
Сделано Ренаном К. Араужо
13 октября 2016 г.

скачать демо и код

Демонстрационное изображение: 10 потрясающих эффектов при наведении с помощью SCSS

10 потрясающих эффектов при наведении с помощью SCSS

Небольшая коллекция стильных эффектов с помощью SCSS.
Сделано Ренаном К. Араужо
13 октября 2016 г.

скачать демо и код

Демонстрационное изображение: 3D-рендеринг на чистом CSS с :hover Animation

3D-рендеринг на чистом CSS с

:hover Animation

Совет: чтобы сохранить этот 3D-вид, вы должны знать детали, длина слова должна быть пропорциональной к номеру свойства перспективы тела. Если длина этого слова увеличивается, вы также должны увеличить перспективу 🙂
Сделано Рафаэлем Гонсалесом
16 сентября 2016 г.

скачать демо и код

О коде

Только CSS исчезают одноуровневые элементы при наведении курсора

Исчезать все одноуровневые элементы при наведении курсора, используя только CSS.

О коде

Эффект наведения для Discover A Project Link

Эффект наведения для обнаружения названия проекта, например, в портфолио.

Демонстрационное изображение: Hover Squares

Квадраты наведения

Квадраты наведения HTML и CSS.
Сделано Рудольфом ван дер Веном
8 декабря 2015 г.

скачать

О коде

Эффект парения

Анимационный эффект наведения.

О коде

Концепция вопросника Pure CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Демонстрация GIF: 3D-эффект при наведении с учетом направления

3D-эффект при наведении с учетом направления

CSS и немного JS.
Сделано Ноэлем Дельгадо
30 октября 2014 г.

скачать демо и код

Демонстрационная GIF-анимация: CSS3 Hover Effects

CSS3 Hover Effects

Вдохновленный tympanus.net, демонстрацией большинства эффектов CSS3 при наведении курсора.
Сделано Хонглио
21 ноября 2013 г.

скачать демо и код

Демо GIF: анимация при наведении

анимация при наведении

Использует jQuery для добавления/удаления классов и запуска анимации только при нажатии кнопки мыши.
Сделано Мэттом Болдтом
8 июля 2013 г.

скачать демо и код

HTML и библиотеки эффектов наведения CSS (5 элементов).

Демонстрационное изображение: Hover.css

Hover.css

Набор эффектов наведения на основе CSS3, которые можно применять к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д. Легко применяйте к своим элементам, изменяйте или просто используйте для вдохновения. Доступно в CSS, Sass и LESS.
Сделано Яном Ланном

скачать демо и код

Демонстрационное изображение: iHover.css

iHover.css

iHover — это коллекция эффектов наведения с использованием чистого CSS, вдохновленная статьей codrops, на платформе Sass.
Сделано Гудом

скачать демо и код

Demo Image: Image Hover Effects

Image Hover Effects

Image Hover Effects, которые работают с Bootstrap или без него.
Сделано Майклом

скачать демо и код

Демонстрационное изображение: Mocassin.css

Mocassin.css

Mocassin.css — это адаптивная коллекция эффектов наведения для подписей, разработанная Sass. Каждая подпись адаптируется к размеру изображения.
Сделано Элизером Пухольсом

скачать демо и код

Демонстрационное изображение: HoverEffects.css

HoverEffects.css

Несколько эффектов наведения для навигации (CSS3).
Сделано Кевином Яннисом

скачать демо и код

Что такое CSS-анимация при наведении курсора и как ее использовать?

Анимация CSS может персонализировать ваш сайт и создавать приятные впечатления для ваших посетителей. Когда посетитель веб-сайта наводит курсор на анимированный элемент, такой как ссылка или кнопка, например, элемент может изменить цвет, увеличиться, уменьшиться, повернуться или их комбинацию. Это не просто приятное зрелище — это еще и визуальная обратная связь о том, что их взаимодействие работает.

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

И анимация CSS, и свойства перехода могут быть указаны с помощью псевдоклассов, которые определяют особое состояние элемента. Только в этом состоянии элемент будет переходить из одного стиля в другой. К псевдоклассам относятся:

  • :hover , когда пользователь наводит курсор на элемент
  • :focus , когда пользователь щелкает или касается элемента или выбирает его с помощью клавиши табуляции
  • :active , когда пользователь нажимает на элемент
  • :target , когда пользователь нажимает на другой элемент

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

  • что такое анимация при наведении CSS
  • как использовать псевдокласс зависания
  • как создать анимацию при наведении с помощью CSS
  • несколько примеров, которые вы можете использовать на своем сайте

Что такое анимация наведения CSS?

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

Взгляните на пример ниже. Если вы наведете курсор на div, он постепенно изменится со светло-розового на темно-розовый.

См. Переход Pen CSS при наведении курсора от HubSpot (@hubspot) на CodePen.

Хотя это выглядит как анимация, на самом деле это переход. Эти два термина часто используются взаимозаменяемо, но анимации и переходы в CSS отличаются.

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

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

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

В качестве примера давайте взглянем на анимацию отскока при наведении ниже.

Отскок при наведении курсора

Чтобы привлечь внимание посетителей, вы можете создать эффект отскока, когда пользователь наводит курсор на элемент страницы. Все, что вам нужно сделать, это определить некоторые свойства анимации и ключевые кадры. Далее в этом посте мы рассмотрим, как создать анимацию шаг за шагом. Сейчас мы кратко рассмотрим этот пример.

В приведенном ниже примере я поместил div во гибкий контейнер. Таким образом, он будет отскакивать только в этой определенной области контейнера и не будет перекрываться с заголовком или абзацем.

Затем я определяю анимацию так, чтобы она завершала отскок за две секунды и выполнялась бесконечно (пока курсор находится над элементом div). Я также установлю его время на , облегчить , чтобы анимация начиналась медленно, ускорялась, а затем замедлялась.

Наконец, я определяю три ключевых кадра. Первый установит начальное состояние анимации. В 0% или в первый момент последовательности анимации элемент будет находиться в 0px по оси Y. При 50% или на полпути последовательности анимации элемент будет двигаться на -50px вверх по оси Y. В 100% или в конце последовательности анимации он вернется к тому месту, где он начал на оси Y, завершив свой отскок.

Посмотрите на результат ниже.

См. «Отскок пера при наведении» Кристины Перриконе (@hubspot) на CodePen.

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

Теперь, когда мы лучше познакомились с анимацией и переходами при наведении курсора в CSS, давайте посмотрим, зачем вам нужно их создавать.

Как использовать Hover CSS

Использование псевдокласса :hover в CSS имеет несколько преимуществ.

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

Источник изображения

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

См. перо Анимированная концепция всплывающей подсказки CSS от Саши (@sashatran) на КодПене.

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

См. перо CSS Grow Hover Effect от Адама Моргана (@AdamCCFC) на КодПене.

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

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

Как создать анимацию наведения CSS

Вот как настроить анимацию наведения CSS на элемент:

1. Настройте свойство анимации.

Используйте свойство animation или его подсвойства для стилизации элемента.

Обратите внимание, что здесь настраиваются только продолжительность, время и другие детали того, как будет развиваться последовательность анимации. Чтобы начать последовательность анимации и заставить элемент двигаться, вам нужно установить правило 9 @keyframes.0004 .

2. Определите подсвойства свойства анимации.

Свойство анимация состоит из следующих подсвойств:

имя-анимации

Правило @keyframes . Объявление animation-name используется как свойство, а имя анимации — как значение свойства (например, animation-name: bounce ).

animation-duration

Это продолжительность одного цикла анимации. Он может быть установлен в секундах ( с ) или миллисекунды ( мс ) (например, анимация-длительность: 3 с ).

функция синхронизации анимации

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

Существуют предопределенные значения, которые вы можете использовать, включая easy , linear , easy-in и easy-in-out . Вы также можете использовать свои собственные значения для этой функции.

анимация-задержка

Время до того, как загруженный элемент запустит последовательность анимации, заданное в секундах или миллисекундах.

Возможные значения: время (необязательно), начальное (устанавливает для свойства значение по умолчанию) и наследовать (наследует свойство от родительского элемента).

Допускаются также отрицательные значения. Если установлено отрицательное значение, анимация запускается так, как если бы она уже проигрывалась. Например, в анимация-задержка: -2 с , анимация будет вести себя так, как если бы она начала воспроизводиться за две секунды до этого.

animation-iteration-count

Количество повторов анимации до остановки. Вы можете определить его как бесконечное число , чтобы повторять анимацию бесконечно.

Значения свойства: число (значение по умолчанию 1 ), бесконечное (анимация зацикливается навсегда), начальное и наследует .

анимация-направление

Задает начальную точку последовательных циклов. Анимация может менять направление или сбрасываться и повторяться.

Значения свойств: нормальный (воспроизведение вперед), реверс (воспроизведение назад), альтернативный (воспроизведение вперед, затем назад), альтернативный-реверс (воспроизведение назад, затем вперед), начальный и наследует .

animation-fill-mode

Это значения, применяемые элементом, когда анимация не воспроизводится (т. е. до первого ключевого кадра и после воспроизведения последнего)

Значения свойств: нет (по умолчанию, к элементу не применяются стили), вперед (элемент сохраняет значения стиля, установленные последним ключевым кадром), назад (элемент сохраняет значения, установленные первым ключевым кадром), оба (анимация следует правилам для обоих направлений), начальный и наследует .

animation-play-state

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

Значения свойства: приостановлено , работает , начальное и наследует .

3. Используйте ключевые кадры, чтобы определить последовательность анимации при наведении курсора CSS.

После определения свойства и подсвойств анимации необходимо настроить правило @keyframes at. Это поможет вам установить по крайней мере два ключевых кадра, которые описывают, как анимация должна выглядеть в определенных случаях во время последовательности.

Чтобы получить наилучшую поддержку во всех браузерах, Правило @keyframes должно иметь префикс поставщика, как и все другие свойства перехода и анимации.

Префиксы поставщика должны показаться следующими:

@-moz-keyframes

@-o-keyframes

@-Webkit-ключа

Примечание: Предыдущие примеры чтобы они были максимально простыми.

Чтобы указать различные точки останова ключевых кадров, используется процент с 0% — первый момент последовательности, 100% — последний. Две точки также могут быть определены их псевдонимами от и от до соответственно.

Вы можете установить промежуточный момент на 50% и/или любые дополнительные контрольные точки по вашему желанию.

Анимируемые свойства ( left и top ) перечислены внутри контрольных точек, как показано в примере Шей Хоу ниже.

См. перо Ключевые кадры анимации от Shay Howe (@shayhowe) на КодПене.

Обратите внимание, что анимировать можно только отдельные свойства. Например, если вы хотите переместить элемент сверху вниз, попытка анимировать от top: 0 до bottom: 0 не сработает. Вместо этого вам нужно анимировать от top: 0 до top: 100% .

4. Используйте сокращение CSS Hover Animation.

Как и переходы, анимации можно записывать в сокращенном формате. Это достигается за счет использования одного свойства анимации вместо нескольких объявлений.

См. перо Стенографическая анимация от Shay Howe (@shayhowe) на КодПене.

Вот как должны выглядеть значения свойства анимации:

    • имя-анимации
  • продолжительность анимации
  • функция синхронизации анимации
  • задержка анимации
  • число итераций анимации
  • анимация-направление
  • режим анимации-заполнения
  • состояние воспроизведения анимации

Теперь, когда вы знаете, как создать CSS-анимацию при наведении курсора, давайте рассмотрим несколько примеров, которые вдохновят вас.

Примеры CSS-анимации при наведении курсора

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

Вот некоторые из самых крутых анимаций, которые вы можете использовать для своего сайта.

1. Эффекты наведения Sass

Источник изображения

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

2. Эффекты при наведении на кнопку

Источник изображения

Это набор из пяти эффектов при наведении на кнопку. Когда ваша мышь наводится на кнопку, они реагируют анимацией. Все они гладкие, простые и готовы к использованию на вашем веб-сайте или целевой странице.

3. CSS эффекты наведения изображения

Источник изображения

Вот пятнадцать эффектов наведения, которые оживят ваши изображения. Есть такие, которые увеличивают и уменьшают масштаб, скользят и вращаются.

4. Креативные эффекты при наведении меню

Источник изображения

Эти эффекты при наведении CSS помогут вашему веб-сайту выделиться интерактивным интерфейсом на панели навигации.

5. Эффект наведения на значки социальных сетей

Источник изображения

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

6. Анимация масштабирования при наведении курсора

Источник изображения

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

7. Анимация переворота при наведении курсора

 

См. перо CSS Card Flip On Hover от Ananya Neogi (@ananyaneogi) на КодПене.

Источник кода

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

8. Анимация поворота при наведении курсора

Источник изображения

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

9. Пауза анимации при наведении

Источник изображения

Дайте пользователям повод остановиться с помощью этой паузы анимации при наведении.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *