Вторник, 17 Июля 2012 09:10

Изменить вид курсора при помощи CSS

Written by 
Оцени эту запись
(1 Голос)

В CSS есть свойство cursor, которое определяет внешний вид курсора при наведении на элемент. Это свойство имеет следующие варианты значений:

 

  • default
  • crosshair
  • help
  • move
  • pointer
  • progress
  • text
  • wait
  • n-resize
  • ne-resize
  • e-resize
  • se-resize
  • s-resize
  • sw-resize
  • w-resize
  • nw-resize

 

Примеры(наведите на блок, чтобы увидеть курсор):

 

 

 cursor: defoult;
 cursor: crosshair;
 cursor: help;
 cursor: move;
 cursor: pointer;
 cursor: progress;
 cursor: text;
 cursor: wait;
 n-resize;
 ne-resize;
 e-resize;
 se-resize;
 s-resize;
 sw-resize;
 w-resize;
 nw-resize;

 

 

Для чего это используется.

По умолчанию, при наведении на ссылку курсор имеет вид pointer, а при наведении на текст - text. Часто элементы управления некоторой динамикой реализовуют не при помощи ссылок, а при помощи span или div. Тогда нужно дать понять пользователю, что при нажатии на этот элемент что-то произойдет. В таком случае, удобно сделать для элемента стиль cursor: pointer, поскольку такой  вид курсора асоциируется у пользователей со ссылками.

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов