Стиль курсора мыши CSS. Свойство cursor

С помощью свойства cursor можно указать вид курсора мыши при наведении на любой веб-элемент. Это поможет определить какое действие нужно выполнить или какое действие доступно для выполнения. Самый простой пример встречается, когда курсор наводится на гиперссылку, ведущую на другую часть сайта. Если в обычном состоянии курсор мыши имеет вид стрелки, то при наведении на ссылку он меняется на руку, с вытянутым указательным пальцем.

Все популярные браузеры отлично поддерживают свойство cursor, разве что некоторые значения могут не понимать, даже самые новые версии браузеров, особенно те значения, которые добавились в третьей версии каскадной таблице (CSS3). С возможностью нестандартного свойства -webkit можно расширить круг поддержки.

cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
cursor: -webkit-grab; cursor: -moz-grab;
cursor: -webkit-grabbing; cursor: -moz-grabbing;

Кроме стандартного вида курсора при желании допускается, использование любой картинки, иконки как в обычном состоянии, так и в hover эффекте. Формат изображения в принципе подойдет любой, но лучше всего брать .cur, потому что его поддерживаются почти все браузеры.

/*вид курсора в обычном состоянии*/
body {cursor: url("img/cursor.cur"), progress}
/*вид курсора при наведении на ссылку*/
a:hover {cursor: url("img/cursorhov.cur"), default;}
/*координаты x y (необязательны)*/
body {cursor: url(img/index.png) 6 22, auto;}

Вид, значение, поддержка браузеров свойства cursor

cursor:auto;

cursor:default;

cursor:none;

cursor:pointer;

cursor:progress;

cursor:help;

cursor:text;

cursor:cell;

cursor:crosshair;

cursor:alias;

cursor:context-menu;

cursor:vertical-text;

cursor:copy;

cursor:move;

cursor:no-drop;

cursor:wait;

cursor:grab;

cursor:grabbing;

cursor:zoom-in;

cursor:zoom-out;

cursor:not-allowed;

cursor:all-scroll;

cursor:col-resize;

cursor:row-resize;

cursor:nesw-resize;

cursor:nwse-resize;

cursor:n-resize;

cursor:e-resize;

cursor:s-resize;

cursor:w-resize;

cursor:ns-resize;

cursor:ew-resize;

cursor:ne-resize;

cursor:nw-resize;

cursor:sw-resize;

cursor:se-resize;

img png
img cur
img gif
img jpg
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *