Курсор мыши в виде руки

Браузеры определяют вид курсора в зависимости от тега HTML. Можно изменить его внешность средствами CSS с помощью свойства cursor (w3.org).

<style type="text/css">
  .cursor {cursor: pointer;} 
</style>

<span class="cursor">Курсор мыши в виде руки</span>
он же
<span style="cursor: pointer;">Курсор мыши в виде руки</span>
cursor: none;cursor: auto;cursor: url(URL_изо), auto;
cursor: default;cursor: pointer;cursor: help;cursor: context-menu;
cursor: text;cursor: vertical-text;
cursor: alias;cursor: copy;
cursor: progress;cursor: wait;
no-dropnot-allowed
cursor: cell;cursor: crosshair;
cursor: e-resize;cursor: ew-resize;cursor: w-resize;
cursor: n-resize;cursor: s-resize;cursor: ns-resize;
cursor: ne-resize;cursor: sw-resize;cursor: nesw-resize;
cursor: nw-resize;cursor: se-resize;cursor: nwse-resize;
cursor: all-scroll;cursor: move;
cursor: col-resize;cursor: row-resize;
cursor: -moz-grab; cursor: -webkit-grab;cursor: -moz-grabbing; cursor: -webkit-grabbing;
cursor: zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-in;
cursor: zoom-out; cursor: -moz-zoom-out; cursor: -webkit-zoom-out;

Несколько значений поддерживаются не всеми браузерами или с использованием префиксов (-moz- для Firefox, -webkit- для Chrome y Safari).

Если обратиться к статье про CSS селекторы, то для ссылок, открывающихся в новом окне, можно установить вид курсора.

<style type="text/css">
  a[target="_blank"] {cursor: url(http://2.bp.blogspot.com/-XhlZKpxWdHg/T1R_fSOi9zI/AAAAAAAACw8/g7hup5BWWaI/s400/kursor.png), auto;}
</style>

<a href="#" target="_blank">Курсор в новом окне</a>
IE показывает формат файла CUR и ANI, Опера не работает с cursor: url(URL_изо);.
в f t
наверх ↑

4 комментария:

Vlsu
Здравствуйте! Спасибо за статейку - даже не думал, что курсор можно менять через css, считал, что только сторонними скриптами.

Вопрос такой: чтобы применить ко всему блогу, нужно вместо 'a' добавить 'body a:link' и 'body a:hover', так? Или лучше содержимое сайта заключить в 'div' и ему присвоить класс курсора?
NMitra
Ко всему блогу к тегу a?

a {cursor: ...;}
Vlsu
Мда, какую-то ерунду я написал...
Имелось ввиду заменить простой "стрелочный" указатель (хотел коричневый) и отдельно указатель для ссылок (коричневую лапку). По-идее для этого должно хватить описания тегов "body" и "a". Потом в целях экономии трафика посетителей передумал утяжелять страницу...

И да, Наталья, поздравляю Вас с 8 марта!!!
NMitra
Спасибо!