Html on hover code

: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 , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Примечание: Для аналогичного эффекта, но основанного на псевдоклассе :checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.

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

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

:hover

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

Раньше интерактив можно было реализовать только при помощи 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.

Источник