Содержание
Селектор :hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS :hover запускается, когда пользователь наводит указатель мыши на элемент.
Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. Например, :link, :active или :visited, который имеет хотя бы один равный атрибут. Поэтому используйте псевдокласс hover после :link и :visit, но перед :active.
Пример ссылок с разными стилями:
Пример применения псевдокласса к элементу . Эффект проявляется при наведении курсора на элемент
В таблице стилей у ссылки есть специальный псевдокласс :hover . Он отвечает за стиль при наведении. Как только курсор будет убран с ссылки, она вернется в исходное состояние.
Примеры с изменением вида ссылки при наведении
Пример 1. Как изменить цвет и сделать подчеркивание при наведении
Преобразуется на странице в следующее:
Пример 2. Как изменить фон ссылки при наведении
Преобразуется на странице в следующее:
Пример 3. Как поменять курсор при наведении на ссылку
По умолчанию у ссылок курсор при наведении имеет значение cursor : pointer . В следующем примере мы изменим его на другой.
Преобразуется на странице в следующее:
Пример 4. Сглаженное изменение стилей ссылки
С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |
Задача
Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.
Решение
Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).
Пример 1. Изменение вида ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.
Рис. 1. Вид ссылки при наведении на неё курсора мыши
Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .
Загрузка...
