Псевдокласс :hover

Псевдоклассы, имеющие отношение к дереву документа

К

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

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве
элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код
(пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется
к селектору B и устанавливает для него красный цвет
текста. Хотя контейнер встречается в первом
абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е.
текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку
родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена
красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.

Псевдокласс :first-child удобнее всего использовать
в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных
элементов. Например, в некоторых случаях красную строку для первого абзаца
текста не устанавливают, а для остальных абзацев добавляют отступ первой строки.
С этой целью применяют свойство text-indent с нужным
значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него
отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

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

Отношения между тегами Html кода — дерево документа

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

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

Узлы этого дерева помечены плюсиками, нажав на которые можно будет увидеть вложенные элементы языка разметки Html. Построение этого дерева и есть результат работы парсера браузера. Давайте теперь посмотрим на принципы отношения между собой отдельных узлов.

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

  1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
  2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
  3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоэлементов — first-line (letter), after и before

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

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

Причем, оба этих псевдоэлемента применяются только к блочным тегам (заголовки, параграфы, контейнеры и т.п.) и как это ни печально, но в браузере IE 6 они тоже не работают.

p:first-line {color:red}

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

p:first-letter {font-size:5em; float:left; color:red}

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

p:after {
content: " KtoNaNovenkogo.ru";
color:red;
}

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

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

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

Для того, чтобы получить такой сложно нумерованный список, используется довольно простой Html код:

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

* Нажимая на кнопку «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

Подборки по теме

  • Краткий справочник CSS-дизайнера
  • Самоучитель по основам Html
  • Азбука верстки на Bootstrap
  • Полезные онлайн-сервисы
  • Описание полезных программ

Использую для заработка

Псевдоэлементы

Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.

Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:

: {  }

Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

Далее рассмотрим некоторые псевдоэлементы и их свойства.

:first-letter

Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу (увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).

Рассмотрим применение first-letter на примере создание выступающего инициала:

...

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

И результат примера:

Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.

:first-line

Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:

...

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

Результат:

 

:after и :before

Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

Рассмотрим пример:

...

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

Научным языком автомобиль это: Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

Смотрим результат:

Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after»  поставить «before», то текст вставиться в начале абзаца.

:nth-child

Данный псевдокласс является глобальной версией :first-child и :last-child. С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

К примеру, если вы хотите нацелиться на второй дочерний элемент, то используйте :nth-child(2).

odd и even

Кроме использования чисел, :nth-child поставляется с двумя ключевыми словами:

  • :nth-child(odd) нацелится на каждый нечётный элемент;
  • :nth-child(even) нацелится на каждый чётный элемент.

Счётчик n

Мощным аспектом :nth-child является то, что он может нацелиться на элементы, основываясь на расчётах с помощью ключевого слова n.

Значение n повышается от 0 до количества представленных дочерних элементов.

Что делать, если вы хотите нацелиться на каждый третий элемент?

В нашем случае n начинается с нуля и заканчивается шестью.

Компьютеры начинают отсчёт с нуля. И поскольку в нашем списке семь элементов, мы будем считать до шести, потому что 0-1-2-3-4-5-6 представляют семь пунктов.

Вы можете прочитать :nth-child(3n) как «нацелиться на каждый элемент, положение которого делится на 3». В нашем случае, это третий и шестой пункт списка:

  • 3 умножить на 0 равен нулю;
  • 3 умножить на 1 — третий пункт;
  • 3 умножить на 2 — шестой пункт.

n + 1

Что делать, если вы хотите нацелиться на первый пункт и каждый третий пункт после него?

3n + 1 состоит из двух частей:

  • 3n выбирает каждый третий пункт;
  • +1 смещает начало на 1.

Вот как были выполнены вычисления:

  • 3 умножить на 0 плюс 1 равно 1;
  • 3 умножить на 1 плюс 1 равно 4;
  • 3 умножить на 2 плюс 1 равно 7.

Счётчик n является очень гибким. Если вычисления делать сложно, то просто протестируйте, чтобы получить правильную выборку.

Using Sass/LESS for Development

Sass/LESS are non-essential but can speed up development. Preprocess Sass/LESS with your favourite software or the environment provided via .

Sass/LESS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the directory. Hover.css also uses the following and files:

_mixins

Contains and mixins that apply the necessary prefixes you specify in / to properties and keyframes.

Properties can be prefixed like so:

Sass:

@include prefixed(transition-duration, .3s);

LESS:

.prefixed(transition-duration, .3s);

The mixin is passed the property you want to prefix, followed by its value.

Keyframes can be prefixed like so:

Sass:

@include keyframes(my-animation) {
    to {
        color: red;
    }
}

The mixin is passed the keyframe name, followed by the content using the @content directive.

LESS:

.keyframes(my-animation, {
    to {
        color: red;
    }
});

The mixin is passed the keyframe name, followed by the content, both as arguments.

_options

Contains default options, various effect options and the browser prefixes you’d like to use with the mixin. By default, only the prefix is set to (due to most browsers not requiring prefixes now).

As of , also includes a / option which allows you to change the name all classes are prefixed with. The default namespace is .

The / option by default is set to and will generate all Hover.css effects under their own class names, for example. Should you wish to add the properties that make up Hover.css effects to your own class names, set this option to .

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это ). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т.п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

Эта запись будет означать, что все элементы исходного кода страницы, которые являются первыми детьми своих родителей, будут покрашены в красный цвет.

First-child в IE 6 не работает, что печально.

How To Use

Hover.css can be used in a number of ways; either copy and paste the effect you’d like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you’d like it applied to.

A. Copy and Paste an Effect

If you plan on only using one or several effects, it’s better practice to copy and paste an effect into your own stylesheet, so a user doesn’t have to download in its entirety.

Assuming you want to use the Grow effect:

  1. Download Hover.css

  2. In , find the Grow CSS (each effect is named using a comment above it):

    /* Grow */
    .hvr-grow {
        display: inline-block;
        vertical-align: middle;
        transform: translateZ();
        box-shadow:   1px rgba(, , , );
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        transition-duration: 0.3s;
        transition-property: transform;
    }
    
    .hvr-grow:hover,
    .hvr-grow:focus,
    .hvr-grow:active {
        transform: scale(1.1);
    }
  3. Copy this effect and then paste it into your own stylesheet.

  4. In the HTML file which you’d like the effect to appear, add the class of to your chosen element.

Example element before applying Hover.css effect:

a href="#">Add to Basketa>

Example element after applying Hover.css effect:

a href="#" class="hvr-grow">Add to Basketa>

Note: As of all Hover.css class names are prefixed with to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the / variable in or .

B. Reference Hover.css

If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet.

  1. Download
  2. Add to your websites files, in a directory named for example
  3. Reference in of the HTML page you’d like to add Hover.css effects to:
head>
	link href="css/hover-min.css" rel="stylesheet">
head>

Alternatively you can add a reference into an existing stylesheet like so (this may be useful to WordPress users who are unable to edit HTML):

@import url("hover-min.css");
  1. Assuming you want to use the Grow effect, in the HTML file you’d like to use this effect, add the class of to your chosen element.

Example element before applying Hover.css effect:

a href="#" class="button">Add to Basketa>

Example element after applying Hover.css effect:

a href="#" class="button hvr-grow">Add to Basketa>

A Note on the Property

To make an element «transformable», Hover.css gives the following to all elements it is applied to:

display: inline-block;
vertical-align: middle;

Should you wish to override this behavior, either remove the above CSS from Hover.css or change the property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the Sass/LESS version of Hover.css, you can remove/comment out the mixin found in or .

Using Icon Effects

To add a Hover.css icon, place the icon HTML inside the element that a Hover.css effect is applied to. For example:

In the above code, we have given a link element a class of which will make an icon move forward when the link is hovered over. The icon itself is given a class of to let Hover.css know that this is the icon we want to animate. In this example, our icon is from FontAwesome, which we’ve loaded into the of our web page as per FontAwesome’s instructions, like so:

link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

Note: As of Hover.css v2.3.0 you can use any method you like for adding icons (previously, only FontAwesome was supported out-of-the-box.) For example, you could use another icon library or instead, use an image like so:

Here, the image will act as the icon because it has the class applied to it, and when hovered over, the icon will spin as defined by the class on the parent element.

Position of the icon is entirely in your control. You could place it before the text, like so:

Or use custom CSS to position the icon as you see fit.

Псевдоклассы, определяющие состояние элементов

К

этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active

Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.

:link

Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё
не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому
ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован
переход ранее.

Запись A {…} и A:link
{…} по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link можно
не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется
значением атрибута value тега .
При щелчке по элементу формы происходит получение полем фокуса, и цвет текста
меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового
поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному
чёрному цвету.

Результат будет виден только для тех элементов, которые могут
получить фокус. В частности, это теги , , и .

:hover

Псевдокласс :hover активизируется, когда курсор
мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет
свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры
можно задать самостоятельно (пример 15.2).

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками.
При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover,
в противном случае посещённые ссылки не будут изменять свой цвет при наведении
на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Псевдоклассы, задающие язык текста

Д

»Ã Ã´Ã¾ÃºÃÂüõýÃÂþò, þôýþòÃÂõüõýýþ ÃÂþôõÃÂöðÃÂøàÃÂõúÃÂÃÂàýð ýõÃÂúþûÃÂúøàÃÂ÷ÃÂúðàøüõõà÷ýðÃÂõýøõ ÃÂþñûÃÂôõýøõ ÿÃÂðòøû ÃÂøýÃÂðúÃÂøÃÂð, ÃÂðÃÂðúÃÂõÃÂýÃÂõ ôûàÃÂþóþ øûø øýþóþ ÃÂ÷ÃÂúð. á ÿþüþÃÂÃÂàÿÃÂõòôþúûðÃÂÃÂþò üþöýþ ø÷üõýÃÂÃÂàÃÂÃÂøûàþÃÂþÃÂüûõýøàøýþÃÂÃÂÃÂðýýÃÂàÃÂõúÃÂÃÂþò, ð ÃÂðúöõ ýõúþÃÂþÃÂÃÂõ ýðÃÂÃÂÃÂþùúø.

:lang

ÃÂÿÃÂõôõûÃÂõàÃÂ÷ÃÂú, úþÃÂþÃÂÃÂù øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàò ôþúÃÂüõýÃÂõ øûø õóþ ÃÂÃÂðóüõýÃÂõ. àúþôõ HTML ÃÂ÷ÃÂú ÃÂÃÂÃÂðýðòûøòðõÃÂÃÂàÃÂõÃÂõ÷ ðÃÂÃÂøñÃÂàlang, þý þñÃÂÃÂýþ ôþñðòûÃÂõÃÂÃÂàú ÃÂõóà. á ÿþüþÃÂÃÂàÿÃÂõòôþúûðÃÂÃÂð :lang üþöýþ ÷ðôðòðÃÂàþÿÃÂõôõûÃÂýýÃÂõ ýðÃÂÃÂÃÂþùúø, ÃÂðÃÂðúÃÂõÃÂýÃÂõ ôûàÃÂð÷ýÃÂàÃÂ÷ÃÂúþò, ýðÿÃÂøüõÃÂ, òøô úðòÃÂÃÂõú ò ÃÂøÃÂðÃÂðÃÂ. áøýÃÂðúÃÂøàÃÂûõôÃÂÃÂÃÂøù.

íûõüõýÃÂ:lang(ÃÂ÷ÃÂú) { … }

àúðÃÂõÃÂÃÂòõ ÃÂ÷ÃÂúð üþóÃÂàòÃÂÃÂÃÂÃÂÿðÃÂàÃÂûõôÃÂÃÂÃÂøõ ÷ýðÃÂõýøÃÂ: ruàâ ÃÂÃÂÃÂÃÂúøù; enàâ ðýóûøùÃÂúøù ; deàâ ýõüõÃÂúøù ; fràâ ÃÂÃÂðýÃÂÃÂ÷ÃÂúøù; itàâ øÃÂðûÃÂÃÂýÃÂúøù.

ÃÂÃÂøüõà15.6. ÃÂøô úðòÃÂÃÂõú ò ÷ðòøÃÂøüþÃÂÃÂø þàÃÂ÷ÃÂúð

HTML5CSS 2.1IECrOpSaFx

àõ÷ÃÂûÃÂÃÂðàôðýýþóþ ÿÃÂøüõÃÂð ÿþúð÷ðý ýð ÃÂøÃÂ.à15.6. ÃÂûàþÃÂþñÃÂðöõýøàÃÂøÿþòÃÂàúðòÃÂÃÂõú ò ÿÃÂøüõÃÂõ øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàÃÂÃÂøûõòþõ ÃÂòþùÃÂÃÂòþ quotes, ð ÃÂðüþ ÿõÃÂõúûÃÂÃÂõýøõ ÃÂ÷ÃÂúð ø ÃÂþþÃÂòõÃÂÃÂÃÂòÃÂÃÂÃÂõóþ òøôð úðòÃÂÃÂõú ÿÃÂþøÃÂÃÂþôøàÃÂõÃÂõ÷ ðÃÂÃÂøñÃÂàlang, ôþñðòûÃÂõüÃÂù ú ÃÂõóà.

àøÃÂ. 15.6. àð÷ýÃÂõ úðòÃÂÃÂúø ôûàÃÂð÷ýÃÂàÃÂ÷ÃÂúþò

Licenses

Personal/Open Source

  • Use in unlimited personal applications
  • Your application can’t be sold
  • Your modifications remain open-source
  • Free updates

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

  • Use in 1 application
  • Sell your application once only (e.g. a website sold to a client)
  • Your code is kept proprietary, to yourself
  • Free updates to the major version

Extended Commercial License

  • Use in unlimited applications
  • Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
  • Your code is kept proprietary, to yourself
  • Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

OEM Commercial License

Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.

Значения¶

Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
Вид курсора по умолчанию для текущего элемента.
Отключает отображение курсора.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора
Вид
Значение
Тест
Пример

default

P {cursor: default}

context-menu

P {cursor: context-menu}

help

P {cursor: help}

pointer

P {cursor: pointer}

progress

P {cursor: progress}

wait

P {cursor: wait}

cell

P {cursor: cell}

crosshair

P {cursor: crosshair}

text

P {cursor: text}

vertical-text

P {cursor: vertical-text}

alias

P {cursor: alias}

copy

P {cursor: copy}

move

P {cursor: move}

no-drop

P {cursor: no-drop}

not-allowed

P {cursor: not-allowed}

all-scroll

P {cursor: all-scroll}

col-resize

P {cursor: col-resize}

row-resize

P {cursor: row-resize}

n-resize

P {cursor: n-resize}

ne-resize

P {cursor: ne-resize}

e-resize

P {cursor: e-resize}

se-resize

P {cursor: se-resize}

s-resize

P {cursor: s-resize}

sw-resize

P {cursor: sw-resize}

w-resize

P {cursor: w-resize}

nw-resize

P {cursor: nw-resize}

nesw-resize

P {cursor: nesw-resize}

nwse-resize

P {cursor: nwse-resize}

zoom-in

P {cursor: zoom-in}

zoom-out

P {cursor: zoom-out}

grab

P {cursor: grab}

grabbing

P {cursor: grabbing}

В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.

При добавлении курсора из файла синтаксис несколько видоизменится.

Через запятую допускается указывать несколько значений , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, или , допустимые значения перечислены выше.

Примечание

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения и .

Firefox до версии 24 поддерживает значения и .

Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения и .

Firefox до версии 27 поддерживает значения и .

Браузеры на мобильных устройствах не поддерживают свойство .

Значение по-умолчанию:

Применяется ко всем элементам

Вопросы для проверки

1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.

A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?

  1. Код CSS не валидный.
  2. К селектору A не добавлен псевдокласс :link.
  3. Псевдокласс :visited стоит после :hover.
  4. Псевдокласс :active стоит после :visited.
  5. Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

  1. :active
  2. :first-child
  3. :focus
  4. :hover
  5. :lang

3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

  1. К непосещённым ссылкам.
  2. К посещённым ссылкам.
  3. К любым ссылкам при наведении на них курсора мыши.
  4. К посещённым ссылкам при наведении на них курсора мыши.
  5. Ни к одному элементу.
Ссылка на основную публикацию