Css hover element with class

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

Anchor Pseudo-classes

Links can be displayed in different ways:

Example

/* unvisited link */
a:link color: #FF0000;
>

/* visited link */
a:visited color: #00FF00;
>

/* mouse over link */
a:hover color: #FF00FF;
>

/* selected link */
a:active color: #0000FF;
>

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and HTML Classes

Pseudo-classes can be combined with HTML classes:

When you hover over the link in the example, it will change color:

Example

Hover on

An example of using the :hover pseudo-class on a element:

Example

Simple Tooltip Hover

Hover over a element to show a

element (like a tooltip):

Hover over me to show the

element.

Example

p <
display: none;
background-color: yellow;
padding: 20px;
>

CSS — The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Match the first

element

In the following example, the selector matches any

element that is the first child of any element:

Example

Match the first element in all

elements

In the following example, the selector matches the first element in all

elements:

Example

Match all elements in all first child

elements

In the following example, the selector matches all elements in

elements that are the first child of another element:

Example

CSS — The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for elements with lang=»no»:

Example

Some text A quote in a paragraph Some text.

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no «required» attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a «readonly» attribute specified
:read-write	input:read-write	Selects elements with no «readonly» attribute
:required	input:required	Selects elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every element
::before	p::before	Insert content before every element
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

Источник

: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.

Источник