cursor | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
Главная » Справочник CSS3 » Позиционирование


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


cursor | Свойство CSS

Свойство cursor устанавливает тип курсора.




Свойство cursor применяется для изменения внешнего вида курсора мышки при наведении на элемент котрому присвоено значение cursor.В различных операционных системах + дополнительных темах могут существовать различные наборы курсоров,т.е их вид у каждого пользователя будет самым разнообразным.При создании материала на странице можно навязать элементу тот или иной вид,вне зависимости от его оптимального значения.Вы можете создать свой курсор,для этого укажите путь к файлу в формате cur или ani с курсором.В этом материале я выложил готовые рисунки курсоров в количестве 99 штук,можете скачать,вдруг пригодятся.Свойство применимо ко всем элементам,создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные значения cursor


Значение
Описание
autoПо умолчанию,программа сама определит свойство cursor ( оптимальный вариант )
crosshairВ виде крестика
defaultПо умолчанию,браузер сам определит свойство cursor
pointerВ виде руки с указательным пальцем
moveВ виде четырёхстороннего крестика со стрелками (указывает на возможность перемещения объекта)
e-resizeГоризонтальная линия со стрелками в обе стороны (указывает на возможность смещения в право по горизонтали)
ne-resizeДиагональная стрелка из левого нижнего угла в правый верхний ( указывает что верхний правый угол можно переместить )
nw-resizeДиагональная стрелка из правого нижнего угла в левый верхний угол ( указывает что верхний левый угол можно переместить )
n-resizeВертикальная линия со стрелками вверх и вниз ( указывает что верхнюю сторону можно переместить )
se-resizeДиагональная стрелка из правого нижнего угла в левый верхний угол ( указывает что нижний правый угол можно переместить )
sw-resizeДиагональная стрелка из левого нижнего угла в правый верхний ( указывает что можно переместить левый нижний угол )
s-resizeВертикальная линия со стрелками вверх и вниз ( указывает что нижнюю сторону можно переместить )
w-resizeГоризонтальная линия со стрелками в обе стороны ( указывает на возможность смещения в лево по горизонтали )
textВертикальная линия с чёрточками с низу и с верху ( указывает что текст можно выделить )
waitПесочные часы или вращающийся кружок ( указывает на обработку заданного действия - подождите )
progressПесочные часы или вращающийся кружок со стрелкой ( указывает на обработку заданного действия - подождите,можете пока выполнить другие задания )
helpСтрелочка со знаком вопроса ( указывает на наличие дополнительной,справочной информации )
urlПрименяется для указания пути url для курсора с индивидуальным видом ( самодельным например )
-moz-grabРазжатая рука ( указывает что объект может быть захвачен,для перемещения )
-moz-grabbingСжатая рука ( указывает что объект захвачен,можно перемещать )
-moz-zoom-inЛупа с плюсиком в районе увеличительного стекла ( указывает что объект можно увеличить )
-moz-zoom-outЛупа с минусом в районе увеличительного стекла ( указывает что объект можно уменьшить )
inheritНаследует значение родителя


Свойство работает в браузерах




Пример применения свойства cursor для всех значений



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство cursor</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.auto { cursor: auto; }
.crosshair { cursor: crosshair; }
.default { cursor: default; }
.pointer { cursor: pointer; }
.move { cursor: move; }
.e-resize { cursor: e-resize; }
.nw-resize { cursor: nw-resize; }
.n-resize { cursor: n-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.text { cursor: text; }
.wait { cursor: wait; }
.progress { cursor: progress; }
.help { cursor: help; }
.uri { cursor: url('http://delaisait.ucoz.ru/css/demo/img/cursor.cur'), text; }
.inherit { cursor: inherit; }
.-moz-grab { cursor: -moz-grab; }
.-moz-grabbing { cursor: -moz-grabbing; }
.-moz-zoom-in { cursor: -moz-zoom-in; }
.-moz-zoom-out { cursor: -moz-zoom-out; }
-->
</style>
</head>
<body>
<p>Посмотрите на свойство в действии,для этого наведите мышку на значение свойства</p>
<p class="auto">Курсор со свойством  - auto</p>
<p class="crosshair">Курсор со свойством  - crosshair</p>
<p class="default">Курсор со свойством  - default</p>
<p class="pointer">Курсор со свойством  - pointer</p>
<p class="move">Курсор со свойством  - move</p>
<p class="e-resize">Курсор со свойством  - e-resize</p>
<p class="nw-resize">Курсор со свойством  - nw-resize</p>
<p class="n-resize">Курсор со свойством  - n-resize</p>
<p class="se-resize">Курсор со свойством  - se-resize</p>
<p class="sw-resize">Курсор со свойством  - sw-resize</p>
<p class="s-resize">Курсор со свойством  - s-resize</p>
<p class="w-resize">Курсор со свойством  - w-resize</p>
<p class="text">Курсор со свойством  - text</p>
<p class="wait">Курсор со свойством  - wait</p>
<p class="progress">Курсор со свойством  - progress</p>
<p class="help">Курсор со свойством  - help</p>
<p class="uri">Курсор со свойством  - uri (*ссылка на самодельный рисунок со значением text)</p>
<p class="inherit">Курсор со свойством  - inherit</p>
<p class="-moz-grab">Курсор со свойством  - -moz-grab</p>
<p class="-moz-grabbing">Курсор со свойством  - -moz-grabbing</p>
<p class="-moz-zoom-in">Курсор со свойством  - -moz-zoom-in</p>
<p class="-moz-zoom-out">Курсор со свойством  - -moz-zoom-out</p></body>
</html>

Пример в действии




DOWLAND\СКАЧАТЬ

Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/ui.html#cursor-props
Категория: Позиционирование | Добавил: IZOTOP (20.04.2012) | Автор: Меренков Михаил W
Просмотров: 2960 | Теги: скачать курсоры, style, свойство, Cursor, css, как сделать курсор | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]