© 2003 - 2018

CSS: Курсоры

Введение в CSS
Введение в CSS
Что такое CSS
Свойства шрифта
Цвет элемента и цвет фона
Свойства текста
Границы
Единицы измерения
Курсоры
Полоса прокрутки
Размер элемента
Свойства таблицы
Internet Explorer позволяет задавать стили для курсоров. Некоторые стили доступны только для IE 6.
all-scroll Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении
I {cursor: all-scroll;}
auto По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте
I {cursor: auto;}
col-resize Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали
H4 {cursor: col-resize;}
crosshair Курсор-крест
H4 {cursor: crosshair;}
default Стандартный курсор, используемый системой
H4 {cursor: default;}
hand Рука с вытянутым указательным пальцем. Используется при гиперссылке
H4 {cursor: hand;}
help Стрелка с вопросительным знаком.
H3 {cursor: help;}
move Курсор со 4 стрелками, показывающий возможность перемещения
H2 {cursor: move;}
no-drop Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора
TD {cursor: no-drop;}
not-allowed Перечеркнутый круг. Данная операция не поддерживается
TD {cursor: not-allowed;}
pointer Идентична стилю hand
TD {cursor: pointer;}
progress Песочные часы, показывающие на продолжение операции
TD {cursor: progress;}
row-resize Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали
TD {cursor: row-resize;}
text Текстовый курсор-каретка
TD {cursor: text;}
url(uri) Ваш собственный курсор. Поддерживаются файлы .cur и .ani
TD {cursor:url(elogo.cur);}
vertical-text Горизонтальная текстовая каретка для вертикального текста
TD {cursor: vertical-text;}
wait Курсор, показывающий, что система занята и требуется подождать
TD {cursor: wait;}
*-resize Курсоры, показывающие возможность потянуть за край окна. Вместо символа * используйте N, NE, NW, S, SE, SW, E, или W, определяющие направление стрелок
TD {cursor: n-resize;}

Примеры

Проведите курсоры над ячейками таблицы для демонстрации стилей

all-scroll auto col-resize crosshair default hand
help move no-drop not-allowed pointer progress
row-resize text vertical-text wait

 

n-resize s-resize ne-resize sw-resize
nw-resize se-resize e-resize w-resize

 

url(new.cur) url(kiss.ani)
SEO  Аналитика  Юзабилити  SMO  Яндекс  Апдейты  тИЦ  Google
HTML CSS DHTML ОбМ IE