Теги HTML в примерах
|
|
CSS: Курсоры
Большинство современных браузеров позволяют задавать стили для курсоров.
| 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) |
|
Это интересно
Ученые утверждают, что те компании, которые позволяют своим работникам делать короткие перерывы на общения в социальных сетях, увеличивают производительность работы на 8%.
|
![Бизнес-уровень [BL]](https://bl.wmtransfer.com/img/bl/309688839848?w=35&h=18&bg=0XDBE2E9){kind=small}
