Главная css Курсор

Курсор (CSS)

Параметр "CURSOR" устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Аргументы параметра "CURSOR"

cursor:
auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | url('путь к курсору')

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer.

{cursor: auto} - вид курсора по умолчанию для текущего элемента.

  <span style="cursor:help;">подсказка</span>

  <a href="image.png" style="cursor:pointer;">смотреть</a>

  <p style="cursor:url('image/main.cur'),auto;">текст</p>

 

Варианты курсоров

ВидЗначение параметра
"CURSOR"		 Результат

 cursor: default (по умолчанию) Наведи

cursor: crosshair Наведи

cursor: pointer Наведи

cursor: move Наведи

cursor: text Наведи

cursor: wait Наведи

cursor: help Наведи

cursor: n-resize Наведи

cursor: ne-resize Наведи

cursor: e-resize Наведи

cursor: se-resize Наведи

cursor: s-resize Наведи

cursor: sw-resize Наведи

cursor: w-resize Наведи

cursor: nw-resize Наведи

Как задать свой курсор через CSS


При наведении на ссылку курсор принимает вид "лупы" курсор

В Примере рисунок курсора - zoom.cur (расширение у рисунка курсора должно быть .cur).

<style>
  .mycursor,    
   a:hover img.lupa {
   cursor: url("images/kursor/zoom.cur"), pointer;
}
</style>

1
<a href="#" class="mycursor">Увеличить</a>

2 
<a href="rub-big.jpg" target="_blank">
 <img class="lupa" src="rub.jpg" title="Увеличить">
</a>

Результат
При наведении на ссылку курсор принимает вид "лупы".

1
Увеличить

 

2