«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS


Свойство cursor задает  вид курсора при наведении мыши на элемент. 

Это свойство применимо ко всем элементам.

Значение свойства cursor

Значение Вид курсора. Наведите указатель Описание
auto Авто Вид курсора зависит от браузера.
default По умолчанию Курсор по умолчанию - Стрелка.
crosshair Плюс Курсор в виде знака «+».
help Справка Курсор в виде стрелки со знаком вопроса. Справка, помощь.
move Перемещение Курсор для перемещения объектов.
pointer Рука Курсор в виде руки. Указатель.
progress Жди Курсор в виде стрелки с песочными часами. Ожидание.
text Текст Курсор в виде прописной «i». Текстовый курсор.
wait Терпение Курсор в виде песочных часов. Ожидание.
n-resize или s-resize Норд-Зюйд Курсор в виде двойной стрелки. Условное направление: север-юг.
w-resize или e-resize Вест-Ост Курсор в виде двойной стрелки. Условное направление: запад-восток.
nw-resize или se-resize Северо-запад-
Юго-восток
Курсор в виде двойной стрелки. Условное направление: северо-запад-юго-восток.
ne-resize или sw-resize Север-восток-
Юго-запад
Курсор в виде двойной стрелки. Условное направление: северо-восток-юго-запад.

- auto - вид курсора зависит от браузера.

- url - возможность задания своего курсора. Указывается путь к файлу с курсором (в формате cur или ani).

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

- inherit - принимает значение свойства родительского элемента.

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

- auto

Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство cursor </title>
<style type="text/css">
.cursor{cursor: url("img/hand.ani"), url("img/Strelka.cur"), auto;}
</style>

</head>
<body>
<p style="cursor:pointer"> Установлен курсор-рука. </p>
<p class="cursor"> Установим свой курсор! Наведите на этот абзац курсор - он изменится на один из указанных! </p>
</body>
</html>

Результат



Все cвойства CSS

Тематические публикации

CSS по шагам

Тематические публикации