Hover в css что это

Hover в css что это

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

Описание

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

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

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере псевдокласс :hover добавляется к элементу списка (тег
) для создания двухуровневого меню. Результат примера показан на рис. 2.

Рис. 2. Использование :hover для создания меню

Браузеры

В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.

Поддержка браузеров

IE Opera Chrome Firefox Safari
в IE6 :hover работает только для ссылок + + + +

Пример

Определяем цвет ссылок:

Описание и использование

Псевдокласс :hover добавляет стиль к элементу при наведенной мышкой.

Примечание: a:hover должно находиться после a:link и a:visited в таблице стилей.

Примечание: a:active должно находиться после a:hover в таблице стилей.

Псевдоклассы также могут быть объдинены с классами CSS. Например,

Если по ссылке выше перейдут, тогда ссылка станет красной.

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

Напишем пример, где с помощью класса зададим некоторые параметры для ссылки – цвет, подчёркнута или нет; цвет при наведении курсора.

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

Читайте также:  Вы были выведены из psn 80710016 ps3

Сделаем три таблицы:

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

Ссылка на основную публикацию
Honor view 10 dns
Команда DNS сообщает о начале акции – «Купи смартфоны Honor с дополнительными аксессуарами – получи скидку 4000 рублей!» Давно задумываетесь...
Download failed перевод на русский
download [глагол] копирование файлов с удаленного компьютера или сети (интернета) [комп.], закачка файлов [комп.] Транскрипция: |ˌdaʊnˈləʊd|, на русском читается как...
Download interrupted chrome ошибка что делать
Автор: admin · Опубликовано Июль 2, 2016 · Обновлено Июль 27, 2017 Некоторые из пользователей браузера Google Chrome сталкиваются с...
Hover в css что это
Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0+ 8.0+ 1.0+ 4.0+ 1.0+ 1.0+ Краткая информация Применяется Не определено Ссылка...
Adblock detector