Как сделать эффект при наведении в css
Перейти к содержимому

Как сделать эффект при наведении в css

  • автор:

:hover

CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :visited и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :hover после правил :link и :visited до :active , как определено LVHA-порядком: :link — :visited — :hover — :active .

Псевдокласс :hover может применяться к любому псевдоэлементу. Экспериментальная возможность

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

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

Примеры

:link:hover  outline: dotted red; > .foo:hover  background: gold; > 

Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следующего:

div.menu-bar ul ul  display: none; > div.menu-bar li:hover > ul  display: block; > 

применим к HTML структуре типа следующей:

div class="menu-bar"> ul> li> a href="example.html">Менюa> ul> li> a href="example.html">Ссылкаa> li> li> a class="menu-nav" href="example.html">Подменюa> ul> li> a class="menu-nav" href="example.html">Подменюa> ul> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> ul> li> li>a href="example.html">Ссылкаa>li> ul> li> ul> li> ul> div> 

Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши.

Спецификации

Specification
HTML Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

Анимация ссылок при наведении

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

a < color:green; >a:hover

Сама смена цвета или других параметров, если они указаны, происходит мгновенно и чтобы сделать её плавной, к селектору a следует добавить свойство transition. В качестве значения указываем время перехода от одного цвета к другому. К примеру, здесь время перехода занимает полсекунды.

a < color:green; transition: 0.5s; >a:hover

Для ссылок таким методом допустимо менять параметры шрифта, цвет текста, фона, толщину рамки, её цвет и некоторые другие характеристики. Учтите, что не все свойства вообще можно таким способом анимировать. Если у свойства есть дискретные значения, то никакой плавности не ожидайте. Например, свойству text-decoration можно присвоить значение none или underline . Это означает, что ссылки могут находиться только в двух состояниях: с подчёркиванием и без него.

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

Пример 1. Использование border-bottom

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

Пример 2. Использование background

Кроме непосредственной замены значений свойств ссылки можно трансформировать через свойство transform. Сюда входят всякие искажения, вроде поворота, масштабирования, смещения и др. Вот как будет выглядеть одновременный поворот и сдвиг при наведении (пример 3).

Пример 3. Использование transform

Свойство transform не работает непосредственно для строчных элементов, которыми ссылки являются по умолчанию. Поэтому их надо превратить в блочные или строчно-блочные элементы через свойство display со значением inline-block .

Для понимания работы свойства display рекомендуем пройти курс Блочные и строчные элементы.

Использование псевдоэлементов

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

  • a::before — подэлемент до содержимого элемента ;
  • a::after — после содержимого элемента .

Сам код HTML остаётся исходным, никаких дополнительных частей к ссылкам мы не прибавляем, само формирование псевдоэлементов выполняется через CSS. Вот как их можно представить:

a::before — [Псевдоэлемент]Содержимое a::after — Содержимое[Псевдоэлемент]

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

В примере 4 показано добавление красной линии толщиной в один пиксель ниже текста ссылки через псевдоэлемент ::after .

Пример 4. Использование ::after

Давайте построчно разберём данный код CSS.

content: '';

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

position: relative + position: absolute

Эта комбинация у элемента и псевдоэлемента позволяет задавать его положение относительно краёв элемента через свойства left, top, right и bottom.

Для понимания работы свойства position рекомендуем пройти курс Позиционирование элементов.

left: 0; bottom: 0

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

background-color: red

Цвет фона псевдоэлемента, в данном случае красный.

z-index: -1

Псевдоэлемент выводится поверх текста ссылки и своим фоном может перекрывать его. Чтобы этого не случилось, по оси Z располагаем псевдоэлемент ниже.

width: 100%

Ширина нашего псевдоэлемента. Из-за пустого содержимого подэлемент будет нулевой ширины и высоты, поэтому эти параметры следует задать явно.

height: 1px

Желаемая высота псевдоэлемента. Поскольку нам нужна линия толщиной в один пиксель, это же значение указываем в свойстве height. Если поставить 2px, то толщина линии, соответственно, будет два пикселя.

Созданную таким образом линию можно анимировать при наведении на ссылку курсора мыши, меняя нужные нам параметры. Но уже не у самого a::after , а у селектора a:hover::after .

В примере 5 при наведении на ссылку линия снизу увеличивается на всю высоту ссылки.

Пример 5. Изменение псевдоэлемента ::after при наведении

Заметьте, что здесь transition добавляется к селектору a::after , потому что именно псевдоэлемент меняет свои параметры при наведении.

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

a::after < width: 0; /* Линия не видна */ height: 3px; /* Высота линии */ >a:hover::after < width: 100%; /* Линия занимает всю ширину */ >

Если у height поставить 100%, то это будет уже не линия, а фон под ссылкой.

a::after < width: 0; /* Фон не виден */ height: 100%; /* Вся высота */ >a:hover::after < width: 100%; /* Весь фон */ >

Использование градиента

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

background-image: linear-gradient(to left, red, blue)

В параметрах функции linear-gradient() сперва указывается направление градиента (в данном случае to left означает влево), затем начальный и конечный цвета. Если эти цвета задать одинаковыми, то получим однотонный фон без всякого градиента.

Градиент является фоновым изображением, поэтому к нему применимы следующие стилевые свойства:

  • background-repeat — повторение фона;
  • background-position — точка, откуда начинается фон;
  • background-size — размер фона.

Пример 6. Движение градиента слева направо

Задать разное направление движения градиента можно через комбинацию свойств background-position , которое определяет начальную позицию фона, и background-size , устанавливающее размер фона. В табл. 1 показан код CSS, его надо включить в пример 6 для получения желаемого движения градиента.

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

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

Пример 7. Создание линии через градиент

Итоги

  • За стиль элемента при наведении на него курсора мыши отвечает псевдокласс :hover.
  • Плавный переход от одного значения к другому при наведении делается с помощью свойства transition, которое устанавливает время перехода.
  • :hover можно комбинировать с псевдоэлементами ::before и ::after для добавления к ссылке дополнительного декоративного оформления.
  • Схожего результата можно добиться, используя фон, созданный с помощью линейного градиента. Меняя параметры фона можно добиться различных эффектов при наведении курсора на ссылку.

Автор: Влад Мержевич
Последнее изменение: 24.04.2023

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже текста появляется линия толщиной 3 пикселя и цветом #e0591e.

Меню

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

Меню

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже и выше текста появляются линии толщиной 2 пикселя и цветом #2ecc71.

См. также

  • :focus на мобильных устройствах
  • background-size
  • content
  • quotes
  • relative и absolute
  • transition
  • Аккордеон меню
  • Анимация кнопок при наведении
  • Атрибуты ссылок
  • Виды ссылок
  • Всплывающая подсказка
  • Декоративные заголовки
  • Добавление тени
  • Доступность
  • Игра с картинками
  • Использование :hover
  • Масштабирование фона
  • Множественные переходы
  • Не только текст
  • Несколько фоновых картинок
  • Нормальное позиционирование
  • Очистка float
  • Переходы
  • Переходы в действии
  • Переходы и анимация
  • Переходы с помощью :hover
  • Подробнее о позиционировании
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Псевдоэлемент ::after
  • Псевдоэлементы
  • Псевдоэлементы ::after и ::before
  • Работа с кавычками
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Типы ссылок
  • Установка фона и градиента
  • Что это такое?

Рецепты

  • Как выделить цветом строку таблицы при наведении?
  • Как добавить адрес к тексту ссылки?
  • Как добавить всплывающую подсказку к тексту?
  • Как изменить вид маркера списка?
  • Как изменить стиль чисел в списке?
  • Как изменить цвет маркеров в списке?
  • Как изменить цвет ссылки при наведении?
  • Как плавно изменить цвет ссылки?
  • Как сделать нумерацию русскими буквами?
  • Как сделать подчёркивание заголовка?
  • Как сделать ссылку для скачивания?
  • Как сделать ссылку на адрес электронной почты?
  • Как сделать фоновую картинку на всю ширину?
  • Как увеличить картинку при наведении?
  • Как указать язык сайта по ссылке?

Потрясающие эффекты при наведении на чистом CSS. Часть 1

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

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

  • И последний на сегодня, но от того не менее привлекательный эффект парения объекта при наведении на него курсора.
Обсуждение ( 5 )

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Как добавить эффекты при наведении на элементы сайта

Узнайте, как добавить интересные эффекты при наведении на элементы сайта с помощью CSS для улучшения пользовательского опыта и динамики сайта!

Алексей Кодов
Автор статьи
23 июня 2023 в 15:30

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

CSS-селекторы :hover и :focus

Для добавления эффектов при наведении на элементы сайта используются специальные CSS-селекторы :hover и :focus .

:hover

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

button:hover

:focus

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

input:focus

Примеры эффектов при наведении

Теперь давайте рассмотрим некоторые примеры эффектов при наведении на элементы сайта.

Изменение цвета текста и фона

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

a < color: black; background-color: white; text-decoration: none; padding: 5px; >a:hover

Увеличение размера элемента

В этом примере мы увеличим размер изображения при наведении на него:

img < width: 100px; transition: all 0.3s ease; >img:hover

Поворот элемента

В этом примере мы добавим эффект поворота карточки при наведении на нее:

.card < width: 200px; height: 200px; background-color: lightblue; transition: all 0.5s ease; >.card:hover

Заключение

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

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

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

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