В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.
Делаем нестандартный курсор на сайте
Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:
body {
cursor: url('/пусть к файлу/sword.cur'), auto;
}В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur
Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:
.link:hover {
cursor: url('/путь к файлу/sword.cur'), auto;
}Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.
Стандартные свойства CSS для изменения курсора
Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.
| cursor: auto; | cursor: default; | cursor: none; |
| cursor: context-menu; | cursor: help; | cursor: pointer; |
| cursor: progress; | cursor: wait; | cursor: cell; |
| cursor: crosshair; | cursor: text; | cursor: vertical-text; |
| cursor: alias; | cursor: copy; | cursor: move; |
| cursor: no-drop; | cursor: not-allowed; | cursor: all-scroll; |
| cursor: n-resize; | cursor: e-resize; | cursor: s-resize; |
| cursor: w-resize; | cursor: col-resize; | cursor: row-resize; |
| cursor: nw-resize; | cursor: se-resize; | cursor: sw-resize; |
| cursor: ew-resize; | cursor: nesw-resize; | cursor: nwse-resize; |
| cursor: zoom-in; | cursor: zoom-out; | cursor: grabbing; |
| cursor: grab; | cursor: ns-resize; | cursor: ne-resize; |
Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:
.link:hover {
cursor: w-resize;
}А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.
Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте CSS свойство cursor. Это свойство используется для изменения вида курсора мыши cursor на элементах. Оно может быть полезным на веб-страницах в случае, когда кроме щелчка кнопкой нужно выполнить несколько действий.
Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.
Представим вам следующие методы контролирования курсора:
- Как сделать курсор в виде руки при наведении мыши на элемент списка
- Как изменить курсор гиперссылки при наведении мыши
- Как установить изображение для курсора
- Пример со всеми видами маркеров
Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (<li>) и установить стиль только для него. Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента <li>.
Код будет иметь следующий вид, если хотите установить курсор в виде указателя:
Давайте рассмотрим пример вышеуказанного метода:
Пример
<!DOCTYPE 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 для отдельных типов курсора на разных элементах.
Пример
<!DOCTYPE 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». Если хотите изменить его, нужно указать тип курсора для элемента <a> с помощью CSS селектора :hover.
Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:
a:hover {
cursor: default;
}Смотрите следующий пример:
Пример
<!DOCTYPE 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;
}Не забудьте установить вид курсора, чтобы показать, когда браузер не сможет использовать предоставленное изображение. В противном случае, код не будет работать.
Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.
Пример
<!DOCTYPE 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 для установления курсора.
Пример
<!DOCTYPE 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-.
Пример
<!DOCTYPE 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>За вид курсора отвечает CSS свойство «cursor». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.
1
Стандартные курсоры
Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:
body {
cursor: help;
}CSS
Полный список значений cursor
| Значение | Windows | MacOS | Описание |
|---|---|---|---|
auto |
Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента | ||
default |
 |
 |
Основной курсор |
none |
– | – | Курсор не отображается |
context-menu |
 |
 |
Доступно контекстное меню |
help |
 |
 |
Доступна вспомогательная информация |
pointer |
 |
 |
Указатель, обозначающий ссылку |
progress |
 |
 |
Программа занята, но пользователь может взаимодействовать с интерфейсом |
wait |
 |
 |
Программа занята |
cell |
 |
 |
Указывает на возможность выбора клетки таблицы |
crosshair |
 |
 |
Крестик, часто используемый для обозначения выбора на битовой карте |
text |
 |
 |
Значок выбора текста |
vertical-text |
 |
 |
Значок выбора вертикального текста |
alias |
 |
 |
Будет создана ссылка внутри страницы |
copy |
 |
 |
Указывает на возможность копирования |
move |
 |
 |
Указывает на возможность перемещения объекта |
no-drop |
 |
 |
Указывает на невозможность «сбрасывания» объекта |
not-allowed |
 |
 |
Указатель невозможности выполнения действия |
all-scroll |
 |
 |
Указатель возможности перемещения по странице в любом направлении |
col-resize |
 |
 |
Объект может быть раздвинут/сдвинут горизонтально |
row-resize |
 |
 |
Объект может быть раздвинут/сдвинут вертикально |
n-resize |
 |
 |
Грань, которая может быть перемещена |
e-resize |
 |
 |
|
s-resize |
 |
 |
|
w-resize |
 |
 |
|
ne-resize |
 |
 |
|
nw-resize |
 |
 |
|
se-resize |
 |
 |
|
sw-resize |
 |
 |
|
ew-resize |
 |
 |
Двунаправленное изменение размера |
ns-resize |
 |
 |
|
nesw-resize |
 |
 |
|
nwse-resize |
 |
 |
|
zoom-in |
 |
 |
Приближение или уменьшение |
zoom-out |
 |
 |
|
grab |
 |
 |
Указывает на возможность схватить и переместить объект |
grabbing |
 |
 |
Браузеры на мобильных устройствах не поддерживают свойство cursor, но при этом в jQuery событие clik не сработает если у элемента нет свойства cursor: pointer.
2
Установка своего курсора
Все браузеры дают возможность установить элементу свой курсор из файла по URL, например:
body {
cursor: url('/pointer.cur') 4 1;
}CSS
Вторым параметром задаются координаты активной точки, в которой регистрируется нажатие мыши. По умолчанию это левый верхний угол (0,0).
Пример в действии:
Кроссбраузерность
Так как, у браузеров разная поддержка форматов фалов курсора:
- Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI.
- Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
У свойства cursor имеется возможность указать несколько курсоров, в приоритете будет первый в списке поддерживаемый формат.
body {
cursor:
url('/pointer.png') 4 1,
url('/pointer.cur') 4 1,
pointer;
}CSS
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Решать задачи
×
Вам случалось зайти на какой-нибудь сайт и просто застыть в восхищении от реализованных на нем разных штучек? Наверняка среди них был и какой-нибудь интересный курсор, отличающийся от обычной стрелочки.
Такой курсор может улучшить пользовательский опыт. Я задумался, как же его создать, и тщательно изучил этот вопрос. Результатом моих изысканий стала эта статья.
Мы рассмотрим два способа создания кастомного курсора мыши: на чистом CSS и с помощью JavaScript. После этого вы сможете создавать собственные курсоры, привлекающие внимание пользователей.
Эта статья ориентирована на начинающих разработчиков, но понимание некоторых вещей у вас уже должно быть. Чтобы создавать собственные курсоры, вам нужно знать HTML, а также основы CSS и JavaScript.
Кастомизация курсора мыши с помощью CSS
Изменить вид курсора при помощи CSS довольно просто, поскольку в CSS для этого есть специальное свойство. Все, что нужно сделать, это познакомиться с ним и использовать.
Фронтенд-разработчики применяют это свойство часто. Называется оно незамысловато — cursor.
Прежде чем перейти к примеру использования свойства cursor на практике, давайте рассмотрим значения, которые оно может принимать. Хотя большинство разработчиков используют лишь несколько самых важных, стоит знать, какие варианты вообще возможны.
See the Pen
CSS Cursors by Franklin Okolie (@developeraspire5)
on CodePen.
Этот пример на CodePen позволяет протестировать разные виды курсоров. Просто наводите мышь на кнопки с подписанными значениями свойства cursor и оценивайте результат.
Но вернемся к нашей теме. Как же нам кастомизировать курсор мыши? Для этого надо просто сообщить CSS, какое изображение вы намерены использовать, и указать путь к нему при помощи значения url свойства cursor.
body {
cursor: url('image-path.png'),auto;
}
Из примера видно, что я установил свойство cursor для элемента body, так что оно будет применяться к курсору по всему документу. Нужное изображение указано в url().
Далее я добавляю еще парочку url() просто на случай, если первая картинка не загрузится или не найдется из-за каких-то внутренних проблем (т. е. это fallback). Сайт, внезапно оставшийся вообще без курсора, — просто кошмар разработчика, так что fallback важен. Вы можете добавить столько запасных URL, сколько хотите.
body {
cursor: url('image-path.png'), url('image-path-2.svg),
url('image-path-3.jpeg'), auto;
}
Вы также можете настроить отдельный курсор для любого элемента или раздела вашего сайта. Пример на CodePen:
See the Pen
Custom cusors on specific element. by Franklin Okolie (@developeraspire5)
on CodePen.
Это все о кастомизации курсоров при помощи CSS. Теперь давайте посмотрим, что можно сделать, добавив JavaScript.
Как сделать собственные курсоры мыши с помощью JavaScript
Чтобы использовать в этом деле JavaScript, нужны манипуляции с DOM.
Для начала давайте посмотрим на наш HTML:
<div class="cursor rounded"></div> <div class="cursor pointed"><div>
Для представления курсора я создал два блока div. Мы будем манипулировать ими из JavaScript.
Но все по порядку. Сперва создадим CSS.
body{
background-color: #1D1E22;
cursor: none;
}
.rounded{
width: 30px;
height: 30px;
border: 2px solid #fff;
border-radius: 50%;
}
.pointed{
width: 7px;
height: 7px;
background-color: white;
border-radius: 50%;
}
Обратите внимание: в CSS я отключил курсор (помните cursor:none?). Это сделает курсор невидимым; вместо него будет отображаться наш кастомный курсор.
Я стилизовал блоки div, чтобы придать им курсорообразный вид. Вы можете сделать что-то свое, может, добавить фоновый рисунок, эмодзи, стикеры и т. п.
Переходим к JavaScript.
Как с помощью JavaScript заставить курсоры двигаться
const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');
const moveCursor = (e)=> {
const mouseY = e.clientY;
const mouseX = e.clientX;
cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
window.addEventListener('mousemove', moveCursor)
Я добавил прослушиватель событий в глобальном объекте window для прослушки любых движений мыши. Когда мышь двигается, вызывается функциональное выражение moveCursor. В качестве параметра оно получает объект события. При помощи этого параметра я смог получить координаты мыши (X и Y) на любой точке страницы.
Я уже выбрал все виды курсора из DOM при помощи querySelector. Все, что мне оставалось, это перемещать их на точки, определенные координатами X и Y. Это делается путем управления свойствами transform со значением translate3d. В результате, когда движется мышь, блоки div перемещаются в нужные места на странице.
Обратные кавычки, которые вы видите в коде, это шаблонные строки. С их помощью можно легко добавлять переменные к строкам. Альтернативный вариант — конкатенация переменных и строк.
Просто, правда?
Вот CodePen с кодом и результатом его работы:
See the Pen
Customized cursor with JavaScript by Franklin Okolie (@developeraspire5)
on CodePen.
Какой метод лучше?
Выбор метода целиком зависит от ваших нужд. Если вам нужно использовать какие-то эмодзи или картинки в качестве курсора — выбирайте CSS. А для кастомизации сложных фигур и управления их движением лучше использовать JavaScript.
Хорош любой способ, позволяющий достичь желаемого результата и поразить посетителей сайта.
Перевод статьи «How to Make a Custom Mouse Cursor with CSS and JavaScript».
В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
Для изменения внешнего вида курсора послужит CSS-свойство «cursor».
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.
Вот так выглядит шаблон для изменения вида курсора в CSS:
p
{
cursor: значение;
}
Все значения находятся в табличке снизу:
Итак, вначале нужно создать в CSS класс со свойством «cursor»:
.pointer
{
cursor: pointer;
}
В HTML вывести класс:
<a href="#" class="pointer">наведи курсор</a>
Давайте я сейчас сделаю один примерчик.
Вот готовый рабочий код:
<html>
<head>
<title>Как изменить форму курсора мыши на сайте с помощью CSS - bloggood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style ENGINE="text/css">
body {cursor: pointer;}
.help { cursor: help; }
.crosshair {cursor:crosshair;}
.wait {cursor:wait;}
.ne-resize{cursor:ne-resize;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="help">наведи курсор </a></li>
<li><a href="#" class="crosshair">наведи курсор</a></li>
</ul>
<p class="wait">наведи курсор, и курсор изменится</p>
<H3 class="ne-resize">наведи курсор, и курсор изменится</H3>
</body>
</html>
[посмотреть на результат]
Собственный курсор-картинка на css
Теперь я расскажу, как можно поменять стандартный курсор мыши на собственный курсор-картинку. Скачайте курсор мышки с интернета в формате «CUR», их там куча.
Вот так выглядит шаблон для изменения вида курсора-картинки в CSS:
P
{
cursor : url('путь к курсору'), стандартный курсор;
}
стандартный курсор – сюда вставляется значение из таблицы курсоров (смотрите таблицу выше).
Вот готовый код:
<html>
<head>
<title>Как изменить форму курсора мыши на сайте с помощи CSS - bloggood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { cursor: url("Up_Arrow.cur"), text;}
a:hover { cursor : url("UpArrow.cur"), auto;}
</style>
</head>
<body>
<ul>
<li><a href="#">наведи курсор </a></li>
<li><a href="#">наведи курсор</a></li>
</ul>
</body>
</html>
[посмотреть на результат]
[скачать курсоры с примера — UpArrow.cur]
[скачать курсоры с примера — Up_Arrow.cur]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, для сайта
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 1.0+ | 7.0+ | 15.0+ | 3.0+ | 1.5+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#cursor-props |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора
зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а
будет ли он использоваться к месту. Многих пользователей подобные изменения
могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся
при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше
оставить все как есть.
Синтаксис
cursor: [url(‘путь к курсору’),] | [ 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 | inherit ]
Значения
- url
- Позволяет установить свой собственный
курсор, для этого нужно указать путь к файлу с курсором. - auto
- Вид курсора по умолчанию для текущего элемента.
- inherit
- Наследует значение родителя.
Остальные допустимые значения приведены в табл. 1.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
 |
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} |
В зависимости от операционной системы и ее настроек вид курсора может отличаться
от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), …, <ключевое слово>
Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.
Пример 1
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cursor</title>
<style>
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>
<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p>
<a href="help.html" class="help">СПРАВКА 1</a><br />
<a href="help.html" class="help">СПРАВКА 2</a><br />
<a href="help.html" class="help">СПРАВКА 3</a>
</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства cursor
Пример 2
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cursor</title>
<style>
a { cursor: url(images/sniper.cur), pointer; }
</style>
</head>
<body>
<p>Обычный текст</p>
<p><a href="1.html">Ссылка 1</a> <a href="2.html">Ссылка 2</a>
<a href="3.html">Ссылка 3</a></p>
</body>
</html>Объектная модель
[window.]document.getElementById(«elementID«).style.cursor
Браузеры
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet
Explorer и Opera работает со значением hand, которое является
аналогом значения pointer. Кроме того, в
браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll,
col-resize, no-drop,
not-allowed, row-resize,
vertical-text. Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand).
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Opera не работает с файлами курсора.
По умолчанию, курсор мыши, который используется на веб-страницах, имеет вид стрелочки, либо вытянутого указательного пальца правой руки, который отображается, когда пользователь наводит указатель мыши на ссылку.
В общем-то, на этом весь выбор и ограничивается.
Но на практике, иногда возникают ситуации, что хочется изменить стандартное отображение курсора при определенных действиях пользователя. Хочется изменить его внешний вид.
Соответственно, возникает вопрос, как это сделать и какими средствами?
Если мы говорим об изменении внешнего вида курсора, который будет использоваться на веб-страницах, то возможность это сделать предоставляет нам технология CSS. В этой заметке хотелось бы рассмотреть, как это можно сделать.
Но хотелось бы сразу предупредить, что менять внешний вид курсора мыши, который используется по умолчанию, нужно очень осторожно.
Почему? Потому что курсор, который будет менять свой внешний вид в неподходящем месте и в неподходящее время может вводить пользователя в заблуждение.
Например, если сделать так, чтобы при наведении курсора мыши на ссылку он превращается в иконку перевернутых песочных часов, пользователь может подумать, что страница еще не загрузилась и.т.д.
Поэтому пользуйтесь такой возможностью с осторожностью.
Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:
cursor: [ url ("путь к курсору"),] | [ 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 |
inherit ]
Из этого выражения следует, что курсор мыши может быть либо:
1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;
2) Взят из специального файла с изображением курсора
3) Наследован от родительских элементов.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Внешний вид курсора мыши из списка ключевых слов:
Чтобы вы могли представить, какой внешний вид приобретет ваш курсор мыши в зависимости от того ключевого слова, которое вы будете использовать, мне бы хотелось привести специальную таблицу значений:
Каждому значению соответствует определенное отображение курсора.
В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.
<p style="cursor:wait;">Текст абзаца</p>
Внешний вид курсора мыши из файла:
Кроме того, внешний вид курсора можно задать, указав путь к специальному файлу, который содержит оригинальное изображение для курсора.
Файлы с изображениями для курсоров можно без проблем найти в Интернете.
Вот пример, как можно воспользоваться такой возможностью.
<p style="cursor:url('name.cur')">Текст абзаца</p>
Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.
Наследованный внешний вид курсора:
И последнее, курсор мыши может быть наследовано от своих родителей. Например,
<div style="cursor:crosshair"> <p >Текст абзаца</p> </div>
Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем <p>, курсор меняет свое оформление.
Отсюда следует, что свойство cursor наследуется и если его задать для тега body, то внешний вид курсора будет изменен для всей веб-страницы целиком.
Вот такие возможности предоставляет нам технология CSS, для работы с курсорами.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Курсор
Описание
The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано, но с абсолютными значениями url |
| Animation type | discrete |
Синтаксис
/* Применение ключевых значений */
cursor: pointer;
cursor: auto;
/* Использование URL и координат */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* Глобальные значения */
cursor: inherit;
cursor: initial;
cursor: unset;
Значения
<url>-
Ссылка или разделённый запятыми список ссылок:
url(…), url(…), …, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details. <x><y>
Экспериментальная возможность
-
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
- Ключевые слова
-
Наведите курсор на картинку, чтобы увидеть пример в действии:
Категория Значение Вид Описание Основные autoБраузер самостоятельно определяет значение курсора в зависимости от
свойств элемента, на который наведена мышь.
Например: при наведении
на текст отобразит курсорtext.default
Основной курсор платформы, обычно стрелочка. noneКурсор не отображается. Ссылки и статусы выполнения задач context-menu
Доступно контекстное меню. help
Доступна вспомогательная информация. pointer
Указатель, обозначающий ссылку, обычно указующая рука. progress
Программа занята, но пользователь может взаимодействовать с интерфейсом
(в отличие отwait).wait
Программа занята (песочные часы). Выделение cell
Указывает на возможность выбора клетки или клеток таблицы. crosshair
Крестик, часто используемый для обозначения выбора на битовой карте. text
Значок выбора текста. vertical-text
Значок выбора вертикального текста. «Захвати и перенеси» alias
Будет создана ссылка внутри страницы. copy
Указывает на возможность копирования. move
Указывает на возможность перемещения объекта.
no-drop
Указывает на невозможность «сбрасывания» объекта.
В Windows и Mac
OSX то же самое что иnot-allowed.not-allowed
Указатель невозможности выполнения действия. Изменение размера, прокручивание (скроллинг) all-scroll
Указатель возможности перемещения по странице в любом направлении.
в
Windows то же самое чтоmove.col-resize
Объект может быть раздвинут/сдвинут горизонтально. Обычно две
вертикальные черты со стрелочками в разные стороны.row-resize
Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные
черты с вертикальными стрелочками.n-resize
Грань или грани могут быть перемещены. Например
se-resizeиспользуется для обозначения перемещения с
юго-востока. В некоторых системах то же самое что двунаправленное
изменение.e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Двунаправленное изменение размера. ns-resize
nesw-resize
nwse-resize
Масштабирование zoom-in
Приближение или уменьшение.
zoom-out
Захват grab
Указывает на возможность схватить и переместить объект.
grabbing
Формальный синтаксис
Примеры
.foo {
cursor: crosshair;
}
/* use prefixed-value if "zoom-in" isn't supported */
.bar {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz {
cursor: url(hyper.cur), auto;
}
Спецификации
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # cursor |
Совместимость с браузерами
BCD tables only load in the browser