Как поменять указатель мыши на windows 7. Как изменить курсор мыши

Для улучшения внешнего вида ОС разработано большое количество программного обеспечения. Различные пакеты визуальных компонентов дают возможность изменять интерфейс, повторяя более новую версию системы. Существуют программы, которые меняют интерфейс не полностью, а только отдельные его составляющие – прозрачность окон, внешний вид кнопки «Пуск» или отображение курсора мыши.

Как изменить указатель мыши?

Это изменение позволит сделать облик вашей операционной системы более персонализированным и немного оживит его. Если вы пользуетесь Windows 7 заменить привычный внешний вид курсора можно двумя способами: через персонализацию компьютера или через панель управления.

Меняем указатель мыши через персонализацию

На рабочем столе правой кнопкой мыши вызовите диалоговое окно и выберете пункт «Персонализация». В разделе слева нас интересует «Изменение указателей мыши». Переходим в данный раздел.

В этой вкладке собраны все схемы, которые установлены на вашем компьютере. Из предложенного выберите новое отображение указателя и подтвердите изменения. Курсор тут же изменится на новый – только что вами выбранный. Если хотите отменить изменения, выберите тему по умолчанию – Windows Aero. Поэкспериментируйте со всеми курсорами, которые включены в Windows 7. Можно попробовать большие черные курсоры для мыши, вместо привычных белых.

Меняем курсор через панель управления для Windows 7

Здесь все просто. Заходим в Пуск → Панель управления → Мышь и выполняем манипуляции, описанные выше.

Если честно стандартный набор указателей очень сер и убог, там нет ничего интересного. Лучше всего скачать набор нестандартных указателей мыши и использовать их. Скачать их можно набрав в любой поисковой системе запрос «курсоры windows 7». Обратите внимание, что курсоры с расширением.ani – анимированные, а с.cur – мертвые. После того как вы найдете и скачаете понравившийся вам набор (архив с расширением.cur), распакуйте и скопируйте его в папку со стандартным набором C:WindowsCursors.

На вкладке «Указатели» в списке настройки выбираем «Основной режим» и нажимаем кнопку «Обзор». Открывается папка C:WindowsCursors, в которую вы предварительно скопировали новые указатели. Выделяем нужный понравившийся указатель и нажимаем кнопку «Открыть».

Просматривая, как меняются указатели, вы можете изменить отображение всех или только тех, которые вам понравились. После всех манипуляции необходимо сохранить новую схему. Нажимаем «Сохранить как», пишем название схемы и жмем «Ок».

Курсор - это картинка, которую мы видим на мониторе компьютера при использовании манипуляторов типа "мышь". По умолчанию во всех ОС Windows ним является треугольный указатель с небольшим хвостиком. Но человеку свойственно хотеть отличатся от остальных, и именно из-за этого у многих появляется желание кастомизировать интерфейс.

Конечно, можно воспользоваться уже готовыми шаблонами, или скачать новый курсор из интернета. Но лучше сделать свой собственный и абсолютно уникальный! Теперь давайте рассмотрим подробней инструкцию о том, как сделать курсор для мыши.

Сначала нам потребуется установить необходимое ПО:

  • Photoshop,
  • IcoFX.

Вы можете найти и скачать эти программы в Интернете, после чего вам потребуется их установить.

Создаем изображение курсора в Фотошопе

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

Теперь перейдем непосредственно к созданию рабочей поверхности, на которой будем рисовать наш курсор. Для этого в Фотошопе зайдем в меню "Файл" и выберем пункт "Новый". В появившемся диалоговом окне в качестве параметров выставим размер 120 Х 120 пикселей и укажем разрешение 72 dpi. В качестве цветового режима выберем RGB.

Создадим форму для курсора

Для создания формы курсора в Фотошопе воспользуемся векторным инструментом - Сustom Shape Tool. Выбираем его и на панели с настройками выбираем картинку курсора. Если у вас она отсутствует, то необходимо кликнуть по круглой иконке со стрелочкой, расположенной в том же окне, и выбрать пункт "Все". Это действие отобразит все доступные шаблоны данного инструмента.

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

Произведем трансформацию курсора в Фотошопе

Теперь трансформируем курсор перейдя в пункт меню "Редактировать", где необходимо выбрать "Свободная трансформация". После этого будет отображена рамка для трансформирования, двигая которую вы поместите курсор на полотне так, чтобы его кончик находился в левом верхнем углу.

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

Используем графический стиль для курсора

Открываем пункт меню "Слои", в нем выбираем пункт "Стиль слоя" и кликаем по "Варианты смешивания". После этих действий появится диалоговое окно с двумя областями. С левой стороны будет отображено меню, а с правой настройки.На левой панели выберите пункт "Стиль", после чего вы попадете в перечень всех сохраненных в Фотошопе стилей.

Если у вас там ничего нет, нажмите на круглой кнопочке, расположенной справа и выберите в меню пункт "Веб". Так вы загрузите все стили, которые расположены в разделе для веб. Кликните два раза по выбранному стилю, и он будет использован. Также, если вы опытный пользователь Фотошопа, то сможете создать свой собственный стиль.

Уменьшаем курсор и объединяем слои

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

Сейчас мы должны выделить все слои используя клавишу SHIFT. После чего перейти в раздел меню "Слои" и выбрать пункт "Объединить слои". Если вдруг вы хотите сохранить файл со слоями, то перед выполнением этой операции нужно заранее сохранить изображение в формате *.PSD.

Проделав все необходимые операции, мы можем перейти к уменьшению курсора. Поскольку все слои были объединены в один, то изменить его размер будет довольно просто. Перейдите в пункт меню "Изображение" и выберите пункт "Размер изображения". В появившемся диалоговом окне введите новый размер, вместо 120 Х 120 пикселей впишите 32 Х 32. Вот практически и все.

Сохраняем картинку

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

Сохраняем изображение в формате курсора Windows.

Сейчас нам понадобится программа, о которой мы упоминали еще в начале статьи. Открываем приложение IcoFX , в нем переходим в меню "File" и выбираем пункт "Open". Теперь в диалоговом окне выбираем ранее сохраненный нами файл PNG и нажимаем "ОК".

После чего нам нужно сохранить его в формате CUR. Для этого переходим в меню "File" и выбираем пункт "Save As", после чего в появившемся диалоговом окне выставляем формат Windows Cursor (*.cur) и нажимаем "ОК". Все! Файл курсора готов. Теперь осталось установить его в качестве текущего курсора.

Замена текущего курсора в Windows

Завершающий этап. Перейдите в "Панель управления" и выберите в не пункт "Мыщь". В открывшемся окне перейдите на вкладку "Указатели" и нажмите на ней кнопку "Загрузить". В открывшемся окне выберите наш курсор в формате *. CUR и нажмите "ОК".

Поздравляем! Теперь вы знаете как сделать другой курсор в Windows и можете с гордостью похвастаться своим творением всем знакомым!

Сделать курсор. И я хотел бы заметить, что любой посетитель этого сайта может смело предложить в комментариях тему для статьи. Если тема хорошая и пользуется спросом я обязательно напишу статью или урок. Но к сожалению ни в Фотошопе, ни в каком-либо «онлайн-фотошопе» будь то Pixlr или что угодно, сделать полноценный курсор невозможно. Однако, можно сделать изображение курсора, а затем, при помощи особой магии и спец программы, делающей курсоры, довести его до конца. Как обычно, я начал свои поиски с известных поисковиков (см гугл и яндекс) , но к удивлению не нашел ни одной толковой статьи на эту тему, кроме панических комментариев на форумах и бесполезных ответов.

Делать курсор или иконку не сложно. Я делал свои первые курсоры, ещё когда учился в школе. На компьютере стоял Windows 98, небо было голубее, а трава зеленее. Я научу вас создавать курсор в программе Photoshop , впрочем, вы можете делать его где угодно, хоть в MS Paint-e, главное, чтобы ваш графический редактор сохранял полупрозрачные PNG , однако все по порядку. Как обычно любой из вас сможет скачать PSD фаилы со слоями, а так же все то, что мы сделаем в этой статье.

Немного о курсоре

Для начала, вам нужно понять, что курсор, это не более чем прямоугольный кусок графики. Конечно, видим то мы только сам курсор, и это потому что остальная часть графики прозрачная, а значение Альфа канала сведено к нулю. Значит, прежде всего, нам нужен такой графический редактор, в котором можно работать с полупрозрачными областями и который может их сохранять, например в GIF или в полупрозрачный PNG 24. И это конечно Фотошоп, хотя изображение курсора можно сделать даже в Иллюстраторе, так как он тоже сохраняет в веб форматы. Замечу, что время GIF-а безвозвратно уходит. В отличие от PNG он имеет всего 256 цветов и не поддерживает полупрозрачность.

Рисуем курсор в Фотошопе вектором

По большей части нам не обязательно рисовать курсор ни в Фотошопе, ни в каком-либо другом графическом редакторе, так как практически ни один из них не умеет сохранять фаилы в курсорных форматах cur или ani . А сохранять в эти форматы умеют только спец программы предназначенные для рисования курсоров, однако, большая часть этих программ либо безнадежно устарела и не обновляется со времен Windows 98, либо предоставляет убожеские возможности управления графикой. Поэтому я и предлагаю сделать графику в старом добром Фотошопе, вместо того, чтобы разбираться с этими аля CursorEditor PRO , которые от Пэйнта отличаются разве что присутствием Альфа канала.

Начните с создания рабочей поверхности File > New и для наших целей нам подойдет размер 120 на 120 px с разрешением 72 dpi , цветовой режим RGB .

Создаем форму курсора

Прежде всего создадим форму курсора. И в этом нам поможет инструмент, в кармане которого уже запасено все что нужно — Сustom Shape Tool . И этот инструмент является разновидностью векторного инструмента в Фотошопе. Подробности его работы можно посмотреть в моем старом . Выберите этот инструмент, а на панели настроек выберите изображение курсора. И я хотел бы использовать именно эту форму, так как она отлично подходит для урока. Если у вас такой формы нет, скорее всего вы просто не открыли все шаблонные изображения Сustom Shape Tool . В том же окошке кликните по круглой иконке стрелочки и в меню выберите All . Это загрузит практически все шаблоны инструмента Сustom Shape Tool

Выбираем нужную стрелочку, нажимаем SHIFT и проводим курсором по рабочей поверхности. В настройках инструмента обязательна опция Shape Layers , подробнее о которых можно прочитать в моей статье . Если кратко, то Shape Layers создает слой заливки, к которому сразу прикрепляет векторную маску. Вектор в Фотошопе работает именно так.

Трансформируем курсор в Фотошопе

Теперь нам нужно трансформировать объект. Для этого выбираем Edit > Free transform , подробнее о котором можно прочитать в моей статье , а посмотреть практическое применение в . Выберите Edit > Free transform , появится рамка трансформирования. Расположите курсор так, чтобы его кончик был в верхнем левом углу.

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

Опять выберите Edit > Free transform, для начала разверните курсор, затем уменьшите а после нажмите CTRL . Не отпуская его потяните за уголки рамки трансформирования. Переместите угол наклона ближе к левому краю так как у меня на картинке.

Применяем стиль для курсора

До сих пор я не написал ни одной статьи конкретно об использовании стилей, поэтому придется разложить все по полочкам. Стиль в Фотошопе — это графическая кожа, которая натягивается поверх слоя. Стиль состоит из ряда эффектов, которые не меняются с давних пор. Но есть хорошая новость: их вполне хватает чтобы создать практически любую графику для кнопок, шапок и баннеров. И, важное примечание. Изначально стили и создавались в противовес стилям в конкурирующей программе Fireworks от не существующей ныне Macromedia , для работы с веб объектами. Первоначальное применение стилей — создание кнопок, баннеров, шапок и чего угодно для веб сайтов.

Выбираем Layer > Layer Style > Blending Options или альтернативное открытие — двойной клик по слою с курсором на панели слоев Layers. Появится диалоговое окно. В окне две области, меню с левой стороны и настройки с правой. Выберите с левой стороны Style и вы попадете в сохраненные стили, которые уже записаны в Фотошопе. И если у вас там ничего нет, значит вы не загрузили шаблоны. Кликните по круглой кнопочке с правой стороны и выберите из меню Web . Это загрузит все стили из раздела для веб. И собственно на этом можно уже и остановиться, так как вы легко можете выбрать любой стили, применить его и вуаля, красивый курсор готов.

Но я бы хотел создать наш собственный стиль. Вот что у меня на уме. Курсор в стиле металлик, этакий металлический курсор с кучей бликов. Поэтому если вы применили стиль, выберите белый квадратик с красной полоской — это отключит все, переключимся на первый эффект Gradient Overlay в этом же окне и приступим к настройкам.

Кликните по полоске градиента и настройте цвета от белого, к сине серому — 535b5e . В стилях градиента выберите Radial , то есть шарообразный градиент. И вы в любой момент можете позиционировать местонахождение градиента на курсоре, для этого просто кликните по рабочей области, там где нарисован курсор, при открытых настройках стиля Gradient Overlay и перемещайте градиент мышкой на лету. И на моем скрине в панели слоев вы увидите остальные невидимые пока эффекты Стилей. Ничего, их мы тоже последовательно подключим.

Теперь настроим эффект Satin . Что это? Это материал похожий на шелк. И основная задача эффекта Satin создавать переливающиеся блики, примерно такие же как на оригинальном материале. В эффекте Satin выберите режим наложения Blend Mode — Vivid Light и белый цвет. Это создаст жесткий контрастный оттенок при наложении сатина на градиент. Остальные настройки по вкусу, или воспользуйтесь моими.

Теперь включите Bevel and Emboss , он создает псевдо 3D эффекты, подсвечивая слой с одной стороны темным цветом с другой светлым. За счет этого получается визуальная трехмерность.

На всякий случай, вот эффекты, которых мы добились, если все настройки правильные. И если у вас отмечена галочка Preview , то вы видите превьюшку эффекта прямо под кнопкой New Style с правой стороны окна.

И Inner Shadow чтобы создать внутреннюю тень, подчеркнув края курсора. Воспользуйтесь своими настройками, или перепишите мои, это не так важно. И когда ваш стиль готов, вы всегда можете кликнуть по кнопке New Style и записать его в архив стилей.

Последний стиль — Inner Glow , который создает внутреннюю подсветку. В режиме наложения конечно Vivid Light , в настройке Choke 20 размер Size 8 . И теперь, мои друзья, мы закончили с созданием стиля для нашего курсора. Нажмите на кнопку New Style и сохраните стиль в память Фотошопе.

Сливаем слои и уменьшаем курсор

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

Теперь выделите все слои, используйте SHIFT . Затем зайдите в Layers > Merge Layers Я не боюсь сливать изображение и терять мой векторный контур прежде всего, потому что он не представляет особой ценности, так как мы сделали его за 3 минуты. К тому же я сохранил созданный стиль, и могу применить его к чему угодно одним кликом. Однако если вам кажется что этот слой вам еще понадобится, сохраните его в PSD . Вот, зачем я сливаю слои. Сейчас мы будем уменьшать курсор, так как чаще всего курсоры достаточно маленькие, они не занимают ни пол экрана ни даже 200 px. В этом их курсорный смысл.

Конечно, я всегда могу воспользоваться галочкой Scale Styles в окне Image Size и Фотошоп постарается маштабировать стиль, однако он не сможет сделать это достаточно достоверно и стиль все равно поедет. Я хочу слить слои, чтобы перевести прикрепленный стиль в пиксели, так как для нас очень важно, чтобы маленький курсор выглядел так же как большой. Теперь слои слиты, у нас всего один слой с курсором в растре. Зайдиите в Image > Image Size и измените размер с 120 на 120 px на 32 на 32 px . И мы практически сделали наш курсор.

Сохранение курсора в PNG

Откройте File > Safe for Web and Devices и это окно специально создано для сохранения и оптимизации графики для веб, телефонов и планшетов. В появившемся окне вы увидите три области. Средняя область с изображением. Левая область с инструментами. И правая область с настройками. В правой области выберите PNG 24 из выпадающего меню и не забудьте галочку Transparancy , которая и добавляет в фаил альфа канал, скрывающий часть изображения. И это все настройки для нашего курсора. Нажимайте ОК .

Как сделать курсор в формате CUR

Мы практически сделали курсор, однако это по прежнему картинка в формате PNG с изображением курсора, а не сам курсор. В операционной системе его не использовать, для сайта в код не повесить. Настоящий курсор — это прежде всего разновидность системного фаила, к которому прикреплена картинка курсора. Формат такого файла зависит от операционной системы. Для Windows они одни, для Mac OS другие. Мы поговорим о формате CUR. Это статичный формат для курсора, который работает с Windows .

В начале этой статьи я упоминал, что в подобные форматы сохраняют программы типа КурсорРедактор . К сожалению большая часть из них либо платная, либо с испытательным сроком на 30 дней , а графические возможности всех этих программ оставляют желать лучшего. Я перепробовал десяток подобных программ и по моему мнению лучшая из них — IcoFX . Здесь можно найти официальный сайт . Здесь можно скачать IcoFX . Здесь можно посмотреть некоторые уроки о работе с этой программой . И главное преимущество IcoFX — её можно скачать бесплатно и без испытательного срока, по крайней мере пока что. Она работает с большей часть форматов для иконок и курсоров для основных операционных систем. И её способность создавать графический дизайн значительно выше остальных олдскульных программ. Здесь и полупрозрачность, и масса кистей и градиенты и основные инструменты, однако все это ничто против способностей Фотошопа, поэтому я не буду останавливаться на программе IcoFX . Просто скачайте её и давайте уже сделаем этот курсор!

Открываем и сохраняем PNG в CUR

Открываем в программе IcoFX наш PNG . File > Open . В диалоговом окне выбираем Portable Network Graphic (*.png) , чтобы видеть фаилы в формате PNG . Нашли, нажимаем OPEN .

Это пожалуй все что нужно сделать. Теперь сохраним эту картинку в формате CUR . Откройте File > Save As и в появившемся окне выберите формат Windows Cursor (*.cur) . И это все. Мы только что создали работающий курсор в нужном формате.

Загружаем курсор в Windows

Я работаю с Windows Vista, однако на других Windows настройки такие же. В нижнем левом углу экрана нажмите кнопку START. В выпадающем меню выберите Сontrol Panel. В появившемся окне выберите Мышку — Mouse.

В появившемся диалоговом окне выберите вкладку Pointers и нажмите кнопку Browse . В новом диалоговом окне найдите свой курсор в формате CUR и загрузите его. И помните, что это лишь первый курсор в данной коллекции. Чтобы создать целую серию курсоров нужно отрисовать курсоры ко всем состояниям операционной системы, курсор ожидания, курсор при наведении на ссылку, курсор при наведении на форму с текстом и так далее. Либо заменить каждый на единственный, если вам не нужны ситуативные курсоры.

Курсор для сайта

Если вы хотите использовать курсор для сайта, то вам прежде всего необходим фаил курсора в формате CUR , который нужно загрузить на хостинг сайта и прописать его нахождение в CSS сайта. О том как это сделать подробно написано на сайте HTMLBook , который специализируется на HTML и CSS . И помните, что формат CUR сработает для сайта только у тех пользователей, которые пользуются Windows .

Возможно в следующий раз я расскажу как сделать анимированный курсор, похожий на тот, что появляется при зависании операционной системы. До следующих статей на сайте www.сайт



Если вам надоел стандартный вид курсора мыши, то давайте его изменим. Для этого мы рассмотрим два способа: с применением стандартных курсоров и скаченных. Обычный белый, маленький курсор может изрядно надоесть. Особенно если у вас имеются проблемы со зрением, то рекомендую вам увеличить размер ярлыков и курсор мыши поставить более объемный.

Стандартные курсоры – это те, которые предусмотрены вашей операционной системой. То есть вам не нужно будет ничего искать в интернете и скачивать. А скаченные – это те, которые вы скачаете из сайтов и можете установить.

Давайте более подробно рассмотрим, как изменить курсор мыши на Windows 7

Для начала выполняем команду «Панель инструментов » - «Мышь ». Рекомендую в панели инструментов сразу же выставить отображением ярлыков «Мелкие значки ».


Откроется диалоговое окно «Свойства мыши ». В нем переходим во вкладку «Указатели ».


Здесь вы сразу же увидите разделы «Схема » и «Настройка ».
В разделе «Схема » находится открывающийся список с большим количеством наименований возможных «видов» курсоров. Вам необходимо открыть этот список и выбрать один из возможных вариантов. Если по-простому говоря, то «Схемы» - это папки, в которых и хранятся курсоры одного вида.


В разделе «Настройка » представлен список визуальных изменений курсоров из той, или иной схемы. Его вы можете просмотреть, используя колесо прокрутки. То есть все вариации курсора при выполнении той или оной операции: фоновый режим, выделение текста, изменение размеров окон, перемещение и т.д.


Вы наверное уже поняли, что для начала вам нужно выбрать одну из схем. Далее просмотреть в разделе "Настройка" как он будет выглядеть, а затем нажать кнопку "Применить ".


Теперь давайте рассмотрим способ установки скаченных курсоров. Для примера я скачал курсоры с первого сайта в выдаче поисковой системы "Яндекс". Хотелось бы отметить, что практически на всех сайтах курсоры находятся , поэтому сначала разархивируйте их используя .


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


Таким образом можно перепробовать большое количество возможных цветов, форм курсоров мыши и выбрать понравившейся вам.

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

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

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

Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:

cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit

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

Все основные возможные значения приведены в таблице ниже. Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.

Значение Вид Пример
P {cursor: default}
none P {cursor: none}
context-menu P {cursor: context-menu}
help P {cursor: help}
pointer P {cursor: pointer}
progress P {cursor: progress}
wait P {cursor: wait}
cell P {cursor: cell}
crosshair P {cursor: crosshair}
text P {cursor: text}
P {cursor: vertical-text}
alias P {cursor: alias}
copy P {cursor: copy}
move P {cursor: move}
P {cursor: no-drop}
not-allowed P {cursor: not-allowed}
P {cursor: e-resize}
P {cursor: n-resize}
P {cursor: ne-resize}
P {cursor: nw-resize}
P {cursor: s-resize}
P {cursor: se-resize}
P {cursor: sw-resize}
w-resize P {cursor: w-resize}
P {cursor: ew-resize}
P {cursor: ns-resize}
P {cursor: nesw-resize}
P {cursor: nwse-resize}
P {cursor: col-resize}
P {cursor: row-resize}
P {cursor: all-scroll}

Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер Internet Explorer поддерживает все значения.

С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает.cur. Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI . А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG , GIF и JPG .

При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:

cursor: url ("адрес картинки 1"), url ("адрес картинки 2"), ..., <ключевое слово>

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

текст абзаца

Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.

На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.