|
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 |
<TABLE border="1" CELLPADDING="2" CELLSPACING="2">
<TR>
<TD STYLE="cursor:all-scroll">all-scroll</TD>
<TD STYLE="cursor:auto">auto</TD>
<TD STYLE="cursor:col-resize">col-resize</TD>
<TD STYLE="cursor:crosshair">crosshair</TD>
<TD STYLE="cursor:default">default</TD>
<TD STYLE="cursor:hand">hand</TD>
</TR>
<TR>
<TD STYLE="cursor:help">help</TD>
<TD STYLE="cursor:move">move</TD>
<TD STYLE="cursor:no-drop;">no-drop</TD>
<TD STYLE="cursor:not-allowed;">not-allowed</TD>
<TD STYLE="cursor:pointer;">pointer</TD>
<TD STYLE="cursor:progress;">progress</TD>
</tr>
<tr>
<TD STYLE="cursor:row-resize; ">row-resize</TD>
<TD STYLE="cursor:text">text</TD>
<TD STYLE="cursor:vertical-text; ">vertical-text</TD>
<TD STYLE="cursor:wait">wait</TD>
</TR>
</TABLE>
<p>
<TABLE border=1>
<TR>
<TD STYLE="cursor:n-resize;">n-resize</TD>
<TD STYLE="cursor:s-resize;">s-resize</TD>
<TD STYLE="cursor:ne-resize;">ne-resize</TD>
<TD STYLE="cursor:sw-resize;">sw-resize</TD>
</TR>
<TR>
<TD STYLE="cursor:nw-resize;">nw-resize</TD>
<TD STYLE="cursor:se-resize;">se-resize</TD>
<TD STYLE="cursor:e-resize;">e-resize</TD>
<TD STYLE="cursor:w-resize;">w-resize</TD>
</TR>
</TABLE>
|
|