С помощью свойства 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;}