Custom cursor как убрать

Как изменить курсор мыши в Windows

В инструкции ниже речь пойдет о том, как изменить указатель мыши в Windows 10, 8.1 или Windows 7, установить их набор (тему), а при желании — даже создать свой собственный и использовать его в системе. Кстати, рекомендую запомнить: стрелочка, которой вы водите с помощью мыши или тачпада по экрану, называется не курсор, а указатель мыши, однако большинство почему-то называют его не совсем верно (впрочем, в Windows указатели хранятся в папке Cursors).

Установка указателей мыши

Для того, чтобы изменить указатели мыши по умолчанию и установить свои собственные, зайдите в панель управления (в Windows 10 это можно быстро сделать через поиск в панели задач) и выберите раздел «Мышь» — «Указатели». (Если пункта мышь нет в панели управления, переключите «Вид» справа вверху на «Значки»).

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

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

Точно так же при необходимости измените остальные указатели своими собственными.

Если вы скачали в Интернете целый набор (тему) указателей мыши, то часто в папке с указателями вы можете найти файл .inf для установки темы. Кликните по нему правой кнопкой мыши, нажмите «Установить», а затем зайдите в настройку указателей мыши Windows. В списке схем вы сможете найти новую тему и применить ее, тем самым автоматически изменив все курсоры мыши.

Как создать свой собственный курсор

Существуют способы сделать указатель мыши вручную. Самый простой из них — создать png файл с прозрачным фоном и вашим указателем мыши (я использовал размер 128×128), а затем конвертировать его в .cur файл курсора с помощью онлайн-конвертера (я делал на convertio.co). Полученный указатель можно устанавливать в систему. Недостаток такого способа — невозможность указать «активную точку» (условный конец стрелочки), а по умолчанию он получается чуть ниже верхнего левого угла изображения.

А вдруг и это будет интересно:

• Лучшие бесплатные программы для Windows
• В манифесте указана неизвестная структура в Microsoft Store — варианты решения
• Как добавить комментарии, теги и рейтинги к папке Windows
• Не удается войти в учетную запись Windows — как исправить?
• Некоторые параметры задает системный администратор в параметрах электропитания — как исправить?
• Как удалить Галерею в Windows 11

• Windows 11
• Windows 10
• Android
• Загрузочная флешка
• Лечение вирусов
• Восстановление данных
• Установка с флешки
• Настройка роутера
• Всё про Windows
• В контакте
• Одноклассники

Игорь 12.11.2015 в 19:34

• Dmitry 24.11.2016 в 10:01

Как изменить курсор при наведении мыши в CSS

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

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

Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.

Представим вам следующие методы контролирования курсора:

• Как сделать курсор в виде руки при наведении мыши на элемент списка
• Как изменить курсор гиперссылки при наведении мыши
• Как установить изображение для курсора
• Пример со всеми видами маркеров

Как сделать курсор в виде руки при наведении мыши на элемент списка

Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

li < cursor: pointer; >

Давайте рассмотрим пример вышеуказанного метода:

Пример

html> html> head> title>Заголовок документа title> style> li< margin-bottom:15px; > li.pointer < cursor: pointer; > li:hover < background-color: #ccc; > style> head> body> h4>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель: h4> ul> li>Элемент списка 1 с курсором по умолчанию. li> li class="pointer">Элемент списка 2 с курсором-указателем по умолчанию. li> li>Элемент списка с с курсором по умолчанию. li> ul> body> html>

Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

Пример

html> html> head> title>Заголовок документа title> style> li:nth-child(odd) < background: #1c87c9; cursor: progress; width: 50%; padding: 5px; > li:nth-child(even) < background: #ccc; cursor: pointer; width: 50%; padding: 5px; > style> head> body> p>Наведите курсор мыши на элементы, чтобы увидеть как меняется курсор: p> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> li>Элемент списка 4 li> li>Элемент списка 5 li> li>Элемент списка 6 li> li>Элемент списка 7 li> ul> body> html>

Как изменить курсор гиперссылки при наведении мыши

Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.

Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

a:hover < cursor: default; >

Смотрите следующий пример:

Пример

html> html> head> title>Заголовок документа title> style> .link:hover < cursor: default; > style> head> body> h4>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default": h4> p>a href="https://www.w3docs.com">W3docs a> ссылка с исходным видом "pointer". p> p>a class="link" href="https://www.w3docs.com">W3docs a>ссылка с измененным курсором "default". p> body> html>

Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Смотрите статью Как изменить цвет ссылки с помощью CSS.

Как установить изображение для курсора

Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

После этой части кода установите свойство cursor как image:

.mycursor < cursor: url("myimage.png"), pointer; >

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

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

Пример

html> html> head> title>Заголовок документа title> style> body < background: #eee; text-align: center; > button < display: inline-block; background-color: #1c87c9; color: #eee; margin: 25px; position: relative; width: 140px; height: 45px; border-radius: 3px; border: none; font-size: 1.5em; text-align: center; text-decoration: none; box-shadow: 0 2px 8px 0 #999; > button:hover < background-color: #999; color: #ffcc00; > #happy < cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto; > #sad < cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto; > #love < cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto; > style> head> body> h2>Какое у вас впечатление от нашей веб-страницы? h2> button id="happy">Радостное button> button id="sad">Грустное button> button id="love">Влюбленное button> body> html>

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.

Пример

html> html> head> title>Заголовок документа title> style> body < width: 600px; margin: 0.5em auto; > img < width: 280px; height: 186px; margin: 5px; display: inline-block; background-position: 50% 50%; > .dog < cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto; > .cactus < cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto; > .nature < cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto; > .house < cursor: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto; > style> head> body> img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus"> img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature"> img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog"> img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house"> body> html>

Пример со всеми видами курсора

Здесь увидите пример, который содержит все возможные виды курсора.

Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавляется расширение -webkit- .

Пример

html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 1px solid #666; border-radius: 5px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #1c87c9; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Пример свойства cursor h2> p> Наведите курсор мыши на элемент и увидите изменения: p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>

Как использовать Custom Cursor для Chrome

Пожалуйста, убедитесь, что вы используете расширение Custom Cursor на тестовой странице, или любой другой странице, а не на интернет-магазине Chrome, внутренних страницах браузера или стартовой странице. Кастомизации отключены на сайте интернет-магазина Chrome самим Google!

Меню Custom Cursor

Чтобы активировать расширение Custom Cursor, нажмите на его значок, расположенный на панели инструментов Chrome.
Появится всплывающее окно.

Выбор курсора

Перейдите во всплывающее окно Custom Cursor, прокрутите вниз и выберите нравящийся вам курсор пак и кликните на него.
Таким же образом вы можете выбрать другой курсор, когда вы наигрались с первым.
Обязательно попробуйте его где угодно, кроме интернет-магазина Chrome, внутренних страниц браузера и домашней страницы.

Изменение размера курсора

Чтобы изменить размер вашего курсора перейдите во всплывающее окно Custom Cursor.
Кликните на кнопку «Размер курсора», расположенную в верхней части всплывающего окна и используйте ползунок, чтобы установить требуемый размер курсора.

Отключение Custom Cursor

Чтобы вернуть стандартный системный курсор перейдите во всплывающее окно Custom Cursor и кликните «Курсор по умолчанию».

• Download for Chrome
• Download for Windows

У вас все еще не установлено расширение Custom Cursor для Chrome?

Установите его с официального Интернет-Магазина Chrome

У вас все еще не установлен аддон Custom Cursor для Edge?

Установите его с официального сайта Microsoft Edge Addons

У вас все еще не установлен аддон Custom Cursor для Opera?

Установите его с официального сайта Opera addons

У вас все еще не установлен аддон Custom Cursor для Yandex браузера?

Установите его с официального сайта Opera addons для Yandex браузера

У вас все еще не установлен аддон Custom Cursor для Firefox?

Установите его с официального сайта Firefox Browser Add-ons

WE DON’T WANNA LOSE YOU!

Add sparkle to your browsing experience with Custom Cursor Trails! A shiny star trail will follow your mouse cursor on the screen.

Throw rotten tomatoes to websites that you do not like! Now you show your disapproval of websites that deserve it.

A fun idle clicker game about a simple guy willing to become a Custom Cursor hero Cursor-Man and his adventures.

Happy Vials is a calm and cute water sort puzzle that helps you to relax while having fun.

Make the progress bar of YouTube funny and cool! Change the YouTube progress bar to a custom one from our collection.

• Download for Chrome
• Download for Windows

2017 — 2023, Team

Content provided on this website is FanArt. All product names, logos, characters, brands, trademarks and registered trademarks are property of their respective owners and unrelated to Custom Cursor

• Выбор редактора
• Топ курсор паки
• Новые курсор паки
• Топ Скачанных Курсоров
• Случайные наборы курсоров
• Magic 8 Ball Randomizer
• Custom Cursor Creator

• Custom Cursor для Windows 10
• Custom Cursor-Man — Кликер Игра
• Custom Cursor Unblocked
• Custom Cursor on Microsoft Store
• Custom Cursor Trails for Chrome
• Custom Cursor Trails

• Как использовать?
• Сообщество
• Поддержка
• Оцените нас