Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Изменение курсора мыши на сайте с помощью CSS

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

Изменение курсора мыши на сайте с помощью CSS
Содержание статьи

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

Изменение курсора мышки на сайте

Курсор мыши — самый используемый инструмент рядового пользователя настольного компьютера (и ноутбука в том числе). Благодаря курсору происходит наглядное взаимодействие с компьютерной программой или приложением, посредством встроенного в нее интерфейса. От того, какой вид имеет курсор, зависит протекающий в данный момент процесс или же свойства того или иного элемента. Все уже давно привыкли, что когда курсор принимает вид песочных часов или крутящегося кружочка (loader или загрузчик), происходят определенные вычислительные процессы и необходимо немного подождать, потому что нервные клики все равно не дадут никакого результата, компьютер занят. Это может быть, например, загрузка страницы сайта.

А вот еще один пример — допустим, на вашем сайте есть элементы, которые поддаются перемещению (drag and drop), тогда при наведении на них мышки, курсор должен принимать вид крестика, состоящего из четырех стрелочек, направленных во все стороны экрана (cursor: move; от англ. "движение"). Тогда любой поймет, что элемент можно двигать и вам не нужно будет рядом с блоком добавлять подсказку — "Этот блок можно двигать. Для того, чтобы его подвинуть, наведите на него курсор мыши, зажмите левую кнопку... и т. д.".

Самым распространенным примером, к которому уже все давно привыкли — это курсор в виде руки с вытянутым указательным пальцем, который как бы тянется чтобы нажать на кнопку. Такой курсор должен использоваться на всех элементов, клик мышки по которым приведет к какому-либо действию (обычно переход по ссылке или запуск скрипта). Курсор в виде вертикальной полоски с небольшими поперечными полосками сверху и снизу означает что мышка находится над текстом.

К этому все уже настолько привыкли, что такие вещи кажутся совершенно очевидными, но существуют более редкие курсоры мыши, которые используются не так часто, однако о них надо помнить и применять их на сайте в соответствующих случаях.

Стандартные CSS курсоры

В следующей таблице приведены основные (не все существующие) курсоры мыши, которые покрывают практически любые случаи. Некоторые из них используются довольно часто, а некоторые — довольно редко.

Вид Значение Тест Пример
default P {cursor: default}
crosshair P {cursor: crosshair}
help P {cursor: help}
move P {cursor: move}
pointer P {cursor: pointer}
progress P {cursor: progress}
text P {cursor: text}
wait P {cursor: wait}
n-resize P {cursor: n-resize}
ne-resize P {cursor: ne-resize}
e-resize P {cursor :e-resize}
 / se-resize P {cursor: se-resize}
s-resize P {cursor: s-resize}
sw-resize P {cursor: sw-resize}
w-resize P {cursor: w-resize}
nw-resize P {cursor :nw-resize}

Как видите, средствами CSS можно изменить курсор на сайте всего одной строкой кода. Это очень просто и удобно. А что же делать, если вы хотите изменить стандартный курсор на свой, в виде собственной картинки.

Свой курсор-картинка средствами CSS

К сожалению, некоторые виды курсора не описаны в стандартных свойствах CSS и когда это нужно, на помощь приходит замечательное CSS свойство:

cursor: url(/i/your_cursor.cur), url(/i/your_cursor.png);

Как видите, мы изменили стандартный курсор на свой, который на всякий случай, для кроссбраузерности, сохранили в двух форматах — CUR и PNG. Формат PNG понимается не всеми браузерами (попробуйте догадаться, с какими браузерами проблемы).

Казалось бы, зачем рисовать свой курсор, если стандартных по идее должно с лихвой хватать? Но тут все зависит от преследуемых целей и ситуации бывают разные. Взять, к примеру самый простой пример — необходимо, чтобы курсор становился лупой при наведении на картинку. Лупа — увеличение, поэтому любой пользователь на интуитивном уровне моментально поймет, что картинка может быть увеличена для более детального рассмотрения.

Курсор мыши в виде лупы при наведении на картинку демонстрирует следующий пример:

открыть в новой вкладке


Предыдущая статья:
Адаптивная верстка сайта. Особенности, преимущества и недостатки

Читайте также:
Резервная копия сайта (бэкап)


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»