Как задать вид курсора

Оцените материал
(0 голосов)

Здравствуйте! В этой статье я расскажу как с помощью css можно поменять вид курсора. Задать вид курсора средствами CSS очень просто. Для этого надо определить, у каких элементов мы хотим изменить вид курсора и добавить в таблицу стилей всего одну строчку:

cursor: [вид];

Стандартных видов у курсора - 14:

  • crosshair - перекрестье
  • help - знак вопроса или воздушный шар (в зависимости от браузера)
  • e-resize, w-resize - двунаправленная горизонтальная стрелка
  • n-resize, s-resize - двунаправленная вертикальная стрелка
  • ne-resize, sw-resize - двунаправленная диагональная стрелка (с нижнего левого угла в верхний правый)
  • se-resize, nw-resize - двунаправленная диагональная стрелка (с нижнего правого угла в верхний левый)
  • move - перекрестье со стрелками на конце
  • pointer - ладошка
  • text - вертикальная линия
  • wait - песочные часы или циферблат (в зависимости от браузера)

И еще два значения:

  • auto - вид по умолчанию
  • default - вид по умолчанию на данной платформе (в основном стрелка)

 

 

Для наглядности, давайте создадим 16 ссылок и каждой определим свой вид курсора. Код html-страницы будет следующим:

<html> 
<head> 
<title>css курсор</title> 
<link rel="stylesheet" type="text/css" href="/style.css"> 
</head> 
<body> 
<a href="#" class="a_auto">auto</a><br> 
<a href="#" class="a_crosshair">crosshair</a><br> 
<a href="#" class="a_default">default</a><br> 
<a href="#" class="a_help">help</a><br> 
<a href="#" class="a_eresize">e-resize</a><br> 
<a href="#" class="a_wresize">w-resize</a><br> 
<a href="#" class="a_nresize">n-resize</a><br> 
<a href="#" class="a_sresize">s-resize</a><br> 
<a href="#" class="a_neresize">ne-resize</a><br> 
<a href="#" class="a_swresize">sw-resize</a><br> 
<a href="#" class="a_seresize">se-resize</a><br> 
<a href="#" class="a_nwresize">nw-resize</a><br> 
<a href="#" class="a_move">move</a><br> 
<a href="#" class="a_pointer">pointer</a><br> 
<a href="#" class="a_text">text</a><br> 
<a href="#" class="a_wait">wait</a><br> 
</body> 
</html>

Просмотреть  пример

 

На странице style.css зададим стили для этих ссылок:

a.a_auto{ cursor: auto } 
a.a_crosshair{ cursor: crosshair } 
a.a_default{ cursor: default } 
a.a_help{ cursor: help } 
a.a_eresize{ cursor: e-resize } 
a.a_wresize{ cursor: w-resize } 
a.a_nresize{ cursor: n-resize } 
a.a_sresize{ cursor: s-resize } 
a.a_neresize{ cursor: ne-resize } 
a.a_swresize{ cursor: sw-resize } 
a.a_seresize{ cursor: se-resize } 
a.a_nwresize{ cursor: nw-resize } 
a.a_move{ cursor: move } 
a.a_pointer{ cursor: pointer } 
a.a_text{ cursor: text } 
a.a_wait{ cursor: wait }
Прочитано 711 раз Последнее изменение Суббота, 29 октября 2016 13:43
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+