Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)
Путь: Заметки о вёрстке сайтов  >  CSS  >  16

Интерфейсное свойство cursor

28 апреля 2002 г.

Курсор — один из самых важных элементов интерфейса. До появления CSS Level 2 при всём желании у вас не было возможности влиять на его внешний вид. Теперь свойство CSS cursor даём вам контроль.

Курсор — один из самых важных элементов интерфейса. До появления CSS Level 2 при всём желании у вас не было возможности влиять на его внешний вид. С появлением CSS2 стало возможным указывать один из предопределённых вариантов, которые в той или иной степени поддерживаются браузерами Internet Explorer 4+ и Netscape Navigator 6+/Mozilla. До Internet Explorer 6 вы не могли задавать произвольный вид курсора, теперь же можете. IE6 поддерживает следующие типы произвольных курсоров:

Cursor is defined by the author, using a custom Uniform Resource Identifier (URI), such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types.

Наглядный пример CSS cursor (смотреть в IE6):

<div style="cursor:url(/CSS/pen.cur)">А ручки-то, вот они!</div>

А ручки-то, вот они!

Чтобы визуально представить себе возможные варианты CSS-свойства cursor, я составил сводную таблицу этого свойства для нескольких браузеров. Подведите «мышку» к значению, чтобы увидеть результат:

Internet Explorer 4,5,5.5 Internet Explorer 6 Netscape Navigator 6
auto
crosshair
default
hand
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
<uri>
progress
not-allowed
no-drop
vertical-text
all-scroll
col-resize
row-resize
auto
crosshair
default
hand (или pointer)
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
copy
alias
cell
grab
grabbing
spinning
crosshair
default
pointer
move
e-resize
n-resize
s-resize
w-resize
text
wait
help
inherit

P. S. Чтобы курсор стал «рукой», и при этом стиль CSS курсора был максимально совместимым, следует писать так:

.foo{
cursor:pointer;
cursor:hand
}

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet