Динамические псевдоклассы

Динамические псевдоклассы

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

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

•:active – используется, когда элемент активизируется посетителем. Например, между моментами, когда он нажимает кнопку мыши и отпускает ее.

•:focus – применяется, когда элемент находится в центре некоторых событий. Например, обрабатывает события клавиатуры или другие типы ввода текста.

Надо отметить, что эти псевдоклассы не являются взаимоисключающими. Элемент может сопоставляться одновременно нескольким псевдоклассам. Например:

a:link { color: red } /* непросмотренные ссылки */

a:visited { color: blue } /* просмотренные ссылки */

a:hover { color: yellow } /* ссылка, над которой в данный момент находится указатель */

a:active { color: white } /* активные ссылки */

Обратите внимание, что правило a: hover должно располагаться после правил a: link и a: visited, так как в противном случае правила каскадирования скроют свойство color правила a: hover. Аналогичным образом благодаря тому, что a: active находится после a: hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Рассмотрим пример сочетания динамических псевдоклассов:

a:focus { background: yellow }

a:focus:hover { background: white }

Во второй строке правило CSS сопоставляется элементам A, которые находятся в псевдоклассах focus и: hover.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Динамические массивы

Из книги Советы по Delphi. Версия 1.0.6 автора Озеров Валентин

Динамические массивы Очень простой пример…Const MaxBooleans = (High(Cardinal) – $F) div sizeof(boolean);Type TBoolArray = array[1..MaxBooleans] of boolean; PBoolArray = ^TBoolArray;Var B: PBoolArray; N: integer;BEGIN N:= 63579; {= получение памяти под динамический массив.. =} GetMem(B, N*sizeof(boolean)); {= работа с массивом… =} B^[3477]:= FALSE; {= возвращение памяти в


Динамические псевдонимы

Из книги Основы объектно-ориентированного программирования автора Мейер Бертран

Динамические псевдонимы Для x и y ссылочного типа при непустом значении y присваивание x := y или соответствующее присоединение в результате вызова приведут к тому, что x и y будут присоединены к одному и тому же объекту. Рис. 8.23.  Разделение как результат присоединенияВ


11.3. Динамические механизмы

Из книги Программирование на языке Ruby [Идеология языка, теория и практика применения] автора Фултон Хэл

11.3. Динамические механизмы Скайнет осознал себя в 2:14 утра по восточному времени 29 августа 1997 года. Терминатор 2, Судный День Многие читатели имеют опыт работы со статическими языками, например С. Им я адресую риторический вопрос: «Можете ли вы представите себе написанную


Псевдоклассы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

Псевдоклассы Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.Псевдоклассы также используются не


Псевдоклассы гиперссылок

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Псевдоклассы гиперссылок Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.Все псевдоклассы гиперссылок,


Структурные псевдоклассы

Из книги Фундаментальные алгоритмы и структуры данных в Delphi автора Бакнелл Джулиан М.

Структурные псевдоклассы Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и


Псевдоклассы :not и *

Из книги Недокументированные и малоизвестные возможности Windows XP автора Клименко Роман Александрович

Псевдоклассы :not и * Особый псевдокласс: not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:<основной селектор>:not(<селектор выбора>) { <стиль> }Стиль будет привязан


Псевдоклассы 

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

Псевдоклассы  Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.Псевдоклассы также используются


Псевдоклассы гиперссылок

Из книги Описание языка PascalABC.NET автора Коллектив РуБоард

Псевдоклассы гиперссылок Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.Все псевдоклассы гиперссылок,


Структурные псевдоклассы

Из книги автора

Структурные псевдоклассы Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и


Псевдоклассы :not и *

Из книги автора

Псевдоклассы :not и * Особый псевдокласс: not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:<основной селектор>:not(<селектор выбора>) { <стиль> }Стиль будет привязан к


Динамические параметры

Из книги автора

Динамические параметры Теперь поговорим еще о нескольких параметрах, которые влияют на версию системы Windows. Автор назвал их динамическими, потому что в отличие от параметра ProductSuite, который был рассмотрен выше, эти параметры очень часто проверяются системой — особенно их


7.4. Псевдоэлементы и псевдоклассы

Из книги автора

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


Псевдоклассы ссылок

Из книги автора

Псевдоклассы ссылок Обычно браузеры пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы: link и: visited для различения этих типов ссылок и задания им своего стиля:•:link – применяется, если ссылка не была