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

Узнайте, как можно изменить курсор по умолчанию. Смотрите интересные способы работы с курсором.

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

Для установления внешнего вида курсора используйте 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>

Источник

Курсор

Описание

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 default.gif Основной курсор платформы, обычно стрелочка.
none Курсор не отображается.
Ссылки и статусы выполнения задач context-menu context-menu.png Доступно контекстное меню.
help help.gif Доступна вспомогательная информация.
pointer pointer.gif Указатель, обозначающий ссылку, обычно указующая рука.
progress progress.gif Программа занята, но пользователь может взаимодействовать с интерфейсом
(в отличие от wait).
wait wait.gif Программа занята (песочные часы).
Выделение cell cell.gif Указывает на возможность выбора клетки или клеток таблицы.
crosshair crosshair.gif Крестик, часто используемый для обозначения выбора на битовой карте.
text text.gif Значок выбора текста.
vertical-text vertical-text.gif Значок выбора вертикального текста.
«Захвати и перенеси» alias alias.gif Будет создана ссылка внутри страницы.
copy copy.gif Указывает на возможность копирования.
move move.gif

Указывает на возможность перемещения объекта.
no-drop no-drop.gif Указывает на невозможность «сбрасывания» объекта.
В Windows и Mac
OSX то же самое что и not-allowed.
not-allowed not-allowed.gif Указатель невозможности выполнения действия.
Изменение размера, прокручивание (скроллинг) all-scroll all-scroll.gif Указатель возможности перемещения по странице в любом направлении.
в
Windows то же самое что move.
col-resize col-resize.gif Объект может быть раздвинут/сдвинут горизонтально. Обычно две
вертикальные черты со стрелочками в разные стороны.
row-resize row-resize.gif Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные
черты с вертикальными стрелочками.
n-resize Example of a resize towards the top cursor Грань или грани могут быть перемещены. Например
se-resize используется для обозначения перемещения с
юго-востока. В некоторых системах то же самое что двунаправленное
изменение.
e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif Двунаправленное изменение размера.
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
Масштабирование zoom-in zoom-in.gif

Приближение или уменьшение.
zoom-out zoom-out.gif
Захват grab grab.gif

Указывает на возможность схватить и переместить объект.
grabbing grabbing.gif

Формальный синтаксис

Примеры

.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

Смотрите также

Источник

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим небольшую тему как изменить курсор мыши при помощи 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, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.

Некоторые значения для 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’), …, <ключевое слово>

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

<p style=»cursor:url (‘//webcodius.ru/images/cursor.cur’), pointer;»>текст абзаца</p>

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

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

Источник

Курсоры

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

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

Табл. 1. Курсоры для использования на веб-странице

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

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

Пример 1. Изменение курсора при наведении его на ссылку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
   .movelink { cursor: move; }
   .helplink { cursor: help; }
  </style>
 </head>
 <body>
  <p><a href="new.html" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
  <p><a href="new.html" class="helplink">СПРАВКА</a></p>
 </body>
</html>

Если вы желаете переопределить курсор мыши для всей веб-страницы целиком,
а не только для ссылок, воспользуйтесь селектором BODY
(пример 2).

Пример 2. Изменение вида курсора для всей веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
    body { cursor: ne-resize; }
  </style>
 </head> 
 <body>
   <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
   <p><a href="new.html">СПРАВКА</a></p>
  </body>
</html>

Также можно задать разный вид курсора для отдельных областей веб-страницы
используя теги <div> или <span>.
В этом случае вначале определяется класс и его стиль, а затем он применяется
к тегу, например, <span>. Такой подход позволяет описать
стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).

Пример 3. Курсор для разных областей веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head> 
 <body>
   <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
   <p><a href="1.html" class="help">СПРАВКА 1</a></p>
   <p><a href="2.html" class="help">СПРАВКА 2</a></p>
   <p><a href="3.html" class="help">СПРАВКА 3</a></p>
  </body>
</html>
Источник

I’ve got a list, and I have a click handler for its items:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.

General Grievance's user avatar

asked Jun 21, 2010 at 19:45

user246114's user avatar

user246114user246114

49.5k42 gold badges112 silver badges149 bronze badges

4

In light of the passage of time, as people have mentioned, you can now safely just use:

li { cursor: pointer; }

johannchopin's user avatar

johannchopin

13.2k9 gold badges51 silver badges99 bronze badges

answered Jun 21, 2010 at 19:50

Aren's user avatar

6

Use for li:

li:hover {
    cursor: pointer;
}

See more cursor properties with examples after running snippet option:

An animation showing a cursor hovering over a div of each class

.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; }

.cursors > div {
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) {
       background: #eee;
    }
    &:hover {
       opacity: 0.25
    }
}
<h1>Example of cursor</h1>

<div class="cursors">
    <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>

ihatecsv's user avatar

ihatecsv

5326 silver badges20 bronze badges

answered Jan 4, 2017 at 11:21

Santosh Khalse's user avatar

Santosh KhalseSantosh Khalse

11.6k3 gold badges35 silver badges36 bronze badges

4

You do not require jQuery for this, simply use the following CSS content:

li {cursor: pointer}

And voilà! Handy.

Peter Mortensen's user avatar

answered Jun 21, 2010 at 19:47

Denis 'Alpheus' Cahuk's user avatar

0

Use:

li:hover {
    cursor: pointer;
}

Other valid values (which hand is not) for the current HTML specification can be viewed here.

Peter Mortensen's user avatar

answered Jan 7, 2013 at 11:50

Alastair's user avatar

AlastairAlastair

6,7994 gold badges35 silver badges29 bronze badges

4

Use

cursor: pointer;
cursor: hand;

if you want to have a crossbrowser result!

Peter Mortensen's user avatar

answered Oct 27, 2011 at 7:34

2

CSS: 

.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; }

You can also have the cursor be an image:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

trungk18's user avatar

trungk18

19.5k8 gold badges46 silver badges82 bronze badges

answered Sep 11, 2014 at 7:51

Khaja Md Sher E Alam's user avatar

2

I think it would be smart to only show the hand/pointer cursor when JavaScript is available. So people will not have the feeling they can click on something that is not clickable.

To achieve that you could use the JavaScript libary jQuery to add the CSS to the element like so

$("li").css({"cursor":"pointer"});

Or chain it directly to the click handler.

Or when modernizer in combination with <html class="no-js"> is used, the CSS would look like this:

.js li { cursor: pointer; }

pixma140's user avatar

answered Mar 2, 2014 at 12:40

Christoph's user avatar

ChristophChristoph

1,30016 silver badges28 bronze badges 

li:hover {cursor: hand; cursor: pointer;}

answered Jun 5, 2013 at 21:52

Xedret's user avatar

XedretXedret

1,80318 silver badges24 bronze badges

0

Just for completeness:

cursor: -webkit-grab;

It also gives a hand, the one you know when moving the view of an image around.

It is quite useful if you want to emulate grab behavior using jQuery and mousedown.

Enter image description here

Peter Mortensen's user avatar

answered Aug 18, 2016 at 15:19

Avatar's user avatar

AvatarAvatar

14k8 gold badges116 silver badges190 bronze badges

For complete cross browser, use:

cursor: pointer;
cursor: hand;

Peter Mortensen's user avatar

answered Dec 5, 2012 at 19:46

Erich Toven's user avatar

Erich TovenErich Toven

2272 silver badges2 bronze badges

You can change it either on hover or just specify cursor:pointer on list item, both will work.

ul li {
  cursor: pointer;
}

Alternatively

ul li:hover {
  cursor: pointer;
}

answered Jul 21, 2021 at 9:33

Ismoil Shokirov's user avatar

Ismoil ShokirovIsmoil Shokirov

1,7331 gold badge13 silver badges30 bronze badges

For being able to make anything get the «mousechange» treatment, you can add a CSS class:

.mousechange:hover {
  cursor: pointer;
}
<span class="mousechange">Some text here</span>

I would not say to use cursor:hand since it was only valid for Internet Explorer 5.5 and below, and Internet Explorer 6 came with Windows XP (2002). People will only get the hint to upgrade when their browser stops working for them. Additionally, in Visual Studio, it will red underline that entry. It tells me:

Validation (CSS 3.0): «hand» is not a valid value for the «cursor»
property

answered Jul 23, 2014 at 2:25

vapcguy's user avatar

vapcguyvapcguy

6,8971 gold badge53 silver badges48 bronze badges

0

Simply just do something like this:

li { 
  cursor: pointer;
}

I apply it on your code to see how it works:

li {
  cursor: pointer;
}
<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Note: Also DO not forget you can have any hand cursor with customised cursor, you can create fav hand icon like this one for example:

div {
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}
<div>
</div>

answered Jun 21, 2017 at 12:50

Alireza's user avatar

AlirezaAlireza

98k27 gold badges266 silver badges171 bronze badges

Simply put this code.

li{cursor: pointer;}

answered Nov 25, 2021 at 8:23

Feroz's user avatar

FerozFeroz

4613 silver badges11 bronze badges 

ul li:hover{
   cursor: pointer;
}

answered Dec 21, 2014 at 18:34

user3776645's user avatar

user3776645user3776645

3773 silver badges5 bronze badges

All of the other responses suggest using the standard CSS pointer, however, there are two methods:

  1. Apply the CSS property cursor:pointer; to the elements. (This is the default style when a cursor hovers over a button.)

  2. Apply the CSS property cursor:url(pointer.png); using a custom graphic for your pointer. This may be more desirable if you want to ensure that the user experience is identical on all platforms (instead of allowing the browser/OS decide what your pointer cursor should look like). Note that fallback options may be added in case the image is not found, including secondary urls or any of the other options i.e. cursor:url(pointer.png,fallback.png,pointer);

Of course these may be applied to the list items in this manner li{cursor:pointer;}, as a class .class{cursor:pointer;}, or as a value for the style attribute of each element style="cursor:pointer;".

answered Feb 27, 2016 at 5:25

Andrew's user avatar

AndrewAndrew

1,31214 silver badges20 bronze badges

Use:

ul li:hover{
   cursor: pointer;
}

For more mouse events, check CSS cursor property.

Peter Mortensen's user avatar

answered Feb 3, 2016 at 6:48

Masoud Mustamandi's user avatar

1

You can use one of the following:

li:hover
{
 cursor: pointer;
}

or

li
{
 cursor: pointer;
}

Working example 1:

    li:hover
    {
     cursor: pointer;
    }
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Working example 2:

    li
    {
     cursor: pointer;
    }
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

answered May 13, 2018 at 10:29

willy wonka's user avatar

willy wonkawilly wonka

1,3201 gold badge17 silver badges29 bronze badges

For a basic hand symbol:

Try

cursor: pointer

If you want a hand symbol like drag some item and drop it, try:

cursor: grab

Peter Mortensen's user avatar

answered Dec 24, 2015 at 4:13

Nalan Madheswaran's user avatar

You can use the code below:

li:hover { cursor: pointer; }

Jared Forth's user avatar

Jared Forth

1,5676 gold badges19 silver badges31 bronze badges

answered Jun 6, 2018 at 9:54

Captain JK's user avatar

Captain JKCaptain JK

1601 silver badge7 bronze badges

0

Using an HTML Hack

Note: this is not recommended as it is considered bad practice

Wrapping the content in an anchor tag containing an href attribute will work without explicitly applying the cursor: pointer; property with the side effect of anchor properties (amended with CSS):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

AMDG's user avatar

AMDG

1,0501 gold badge14 silver badges29 bronze badges

answered Jun 19, 2016 at 11:19

Rohit Nair's user avatar

Rohit NairRohit Nair

6093 gold badges7 silver badges22 bronze badges

2

You can also use the following style:

li {
    cursor: grabbing;
}

Peter Mortensen's user avatar

answered Sep 14, 2017 at 11:22

Ankit Misra's user avatar

Check the following. I get it from W3Schools.

.alias { cursor: alias; }
.all-scroll { cursor: all-scroll; }
.auto { cursor: auto; }
.cell { cursor: cell; }
.context-menu { cursor: context-menu; }
.col-resize { cursor: col-resize; }
.copy { cursor: copy; }
.crosshair { cursor: crosshair; }
.default { cursor: default; }
.e-resize { cursor: e-resize; }
.ew-resize { cursor: ew-resize; }
.grab {
  cursor: -webkit-grab;
  cursor: grab;
}
.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.help { cursor: help; }
.move { cursor: move; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nesw-resize { cursor: nesw-resize; }
.ns-resize { cursor: ns-resize; }
.nw-resize { cursor: nw-resize; }
.nwse-resize { cursor: nwse-resize; }
.no-drop { cursor: no-drop; }
.none { cursor: none; }
.not-allowed { cursor: not-allowed; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.row-resize { cursor: row-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.text { cursor: text; }
.url { cursor: url(myBall.cur), auto; }
.w-resize { cursor: w-resize; }
.wait { cursor: wait; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
<!DOCTYPE html>
<html>

<body>
  <h1>The cursor property</h1>
  <p>Mouse over the words to change the mouse cursor.</p>
  <p class="alias">alias</p>
  <p class="all-scroll">all-scroll</p>
  <p class="auto">auto</p>
  <p class="cell">cell</p>
  <p class="context-menu">context-menu</p>
  <p class="col-resize">col-resize</p>
  <p class="copy">copy</p>
  <p class="crosshair">crosshair</p>
  <p class="default">default</p>
  <p class="e-resize">e-resize</p>
  <p class="ew-resize">ew-resize</p>
  <p class="grab">grab</p>
  <p class="grabbing">grabbing</p>
  <p class="help">help</p>
  <p class="move">move</p>
  <p class="n-resize">n-resize</p>
  <p class="ne-resize">ne-resize</p>
  <p class="nesw-resize">nesw-resize</p>
  <p class="ns-resize">ns-resize</p>
  <p class="nw-resize">nw-resize</p>
  <p class="nwse-resize">nwse-resize</p>
  <p class="no-drop">no-drop</p>
  <p class="none">none</p>
  <p class="not-allowed">not-allowed</p>
  <p class="pointer">pointer</p>
  <p class="progress">progress</p>
  <p class="row-resize">row-resize</p>
  <p class="s-resize">s-resize</p>
  <p class="se-resize">se-resize</p>
  <p class="sw-resize">sw-resize</p>
  <p class="text">text</p>
  <p class="url">url</p>
  <p class="w-resize">w-resize</p>
  <p class="wait">wait</p>
  <p class="zoom-in">zoom-in</p>
  <p class="zoom-out">zoom-out</p>
</body>

</html>

Kolappan N's user avatar

Kolappan N

3,3732 gold badges35 silver badges40 bronze badges

answered Sep 29, 2018 at 5:48

Y. Joy Ch. Singha's user avatar

just using CSS to set customize the cursor pointer


/* Keyword value */
cursor: pointer;
cursor: auto;

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;


/* 2 URLs and coordinates, with a keyword fallback */

cursor: url(one.svg) 2 2, url(two.svg) 5 5, progress;

demo

Note: cursor support for many format icons!

such as .cur, .png, .svg, .jpeg, .webp, and so on

li:hover{
  cursor: url("https://cdn.xgqfrms.xyz/cursor/mouse.cur"), pointer;
  color: #0f0;
  background: #000;
}


/*

li:hover{
  cursor: url("../icons/hand.cur"), pointer;
}

*/

li{
  height: 30px;
  width: 100px;
  background: #ccc;
  color: #fff;
  margin: 10px;
  text-align: center;
  list-style: none;
}
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

answered Aug 29, 2019 at 9:48

xgqfrms's user avatar

xgqfrmsxgqfrms

8,8191 gold badge59 silver badges60 bronze badges 

<style>
.para{
    color: black;
}
.para:hover{
    cursor: pointer;
    color: blue;
}
</style>
<div class="para">

In the above HTML code [:hover] is used to indicate that the following style must be applied only on hovering or keeping the mouse cursor on it.

There are several types of cursors available in CSS:

View the below code for types of cursor:

<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>

Click the below link for viewing how the cursor property acts:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

answered Jul 4, 2020 at 5:54

Code Carbonate's user avatar

Источник

Справочник CSS

Время чтения 2 мин.Просмотры 3.6k.Опубликовано 18.02.2021Обновлено 19.02.2021

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

Значений у этого свойства много. Сначала приведем примеры их работы – подведите курсор к названию свойства и увидите его изменение при наведении.

See the Pen
cursor by Андрей (@adlibi)
on CodePen.

Синтаксис

Значение свойство указывается в следующем виде:

cursor: pointer;

При этом вместо pointer нужно указать нужное значение из таблицы со всеми видами значений ниже. По умолчанию установлено значение auto.

Вид Значение Примечание
default default
context-menu context-menu Работает только в IE10+.
help help
pointer pointer Рука автоматически отображается при наведении курсора на ссылку.
progress progress
wait wait
cell cell
crosshair crosshair
text text
vertical-text vertical-text
alias alias
copy copy
move move
no-drop no-drop Отображается как not-allowed везде, кроме IE.
not-allowed not-allowed
all-scroll all-scroll
col-resize col-resize
row-resize row-resize
n-resize n-resize
ne-resize ne-resize
e-resize e-resize
se-resize se-resize
s-resize s-resize
sw-resize sw-resize
w-resize w-resize
nw-resize nw-resize
nesw-resize nesw-resize
nwse-resize nwse-resize
zoom-in zoom-in IE не поддерживает лупу.
zoom-out zoom-out IE не поддерживает лупу
grab grab Chrome, Opera, Safari поддерживают значение -webkit-grab.
grabbing grabbing Chrome, Opera, Safari поддерживают значение -webkit-grabbing.

Произвольный курсор

Вы также можете установить свой курсор в виде изображения:

cursor: url(<адрес>), url(<адрес>), ..., <курсор>

Если указано несколько изображений, браузер будет переходить к следующему варианту, если не удалось загрузить текущее изображение. Заканчиваться выражение должно одним из предустановленных свойств, например, pointer. Если не указать такое ключевое слово, можно получить сообщение об ошибке “invalid property value”.

После изображения также можно указать пару чисел (со значениями не более 32), которые будут координатами для смещения изображения относительно верхнего левого угла. Например:

cursor: url(cursor.png) 4 8, auto;

Можно использовать разные графические форматы, в том числе SVG.

Источник

За вид курсора отвечает 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

Источник

Изменение курсора при наведении мыши

Изменение курсора при наведении мыши

Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.

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

img {
  cursor: pointer;
}

Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:

<img src = 'myimage.jpg' alt = 'Моё изображение' style = 'cursor: pointer;'/>

Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: «cursor : url(«my.cur»), default;«. То есть нужно, используя url() указать путь к изображению курсора.

Вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.

  • Создано 21.06.2011 16:59:30


  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
Источник

cursor

Свойство CSS cursor устанавливает курсор мыши, если он есть, для отображения, когда указатель мыши находится над элементом.

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

Try it

Syntax

cursor: auto;
cursor: pointer;

cursor: zoom-out;


cursor: url(hand.cur), pointer;


cursor: url(cursor_1.png) 4 12, auto;
cursor: url(cursor_2.png) 2 2, pointer;


cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg),  url(cursor_n.cur) 5 5, progress;


cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Свойство cursor задается как ноль или более значений <url> , разделенных запятыми, за которыми следует одно обязательное значение ключевого слова. Каждый <url> должен указывать на файл изображения. Браузер попытается загрузить первое указанное изображение, вернувшись к следующему, если не может, и вернется к значению ключевого слова, если изображения не могут быть загружены (или если ни одно из них не было указано).

За каждым <url> может дополнительно следовать пара чисел, разделенных пробелами, которые устанавливают координаты <x> <y> точки доступа курсора относительно левого верхнего угла изображения.

Values

<url>Optional

url() или разделенный запятыми список url url(), url(), … , указывающий на файл изображения. В качестве запасных вариантов может быть предоставлено более одного url() на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант без URL (одно или несколько значений ключевого слова) должен быть в конце списка резервных вариантов.

<x><y>Optional

Необязательные x-и y-координаты,указывающие на «горячую точку» курсора;точная позиция в курсоре,на которую указывают.

Числа указаны в единицах пикселей изображения. Они относятся к верхнему левому углу изображения, что соответствует « 0 0 », и фиксируются в границах изображения курсора. Если эти значения не указаны, они могут быть прочитаны из самого файла, в противном случае по умолчанию они будут в верхнем левом углу изображения.

keyword

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

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

Category Keyword Example Description
General auto UA будет определять курсор для отображения на основе текущего контекста. Например, эквивалент text при наведении текста.
default wide arrow pointing up and to the left Курсор по умолчанию,зависящий от платформы.Обычно это стрелка.
none Курсор не выводится.
Ссылки и статус context-menu wide arrow pointing up and to the left slightly obscuring a menu icon Доступно контекстное меню.
help wide arrow pointing up and to the left next to a question mark Справочная информация доступна.
pointer right hand with an index finger pointing up Курсор-это указатель,указывающий на ссылку.Обычно это изображение указывающей руки.
progress wide arrow and hour glass Программа занята в фоновом режиме, но пользователь все равно может взаимодействовать с интерфейсом (в отличие от wait ).
wait hour glass Программа занята, и пользователь не может взаимодействовать с интерфейсом (в отличие от progress ). Иногда изображение песочных часов или часов.
Selection cell wide plus symbol Можно выбрать ячейку таблицы или набор ячеек.
crosshair plus symbol composed of two thing lines. Кросс-курсор,часто используемый для указания выделения в растровой карте.
text vertical i-beam Текст может быть выделен.Обычно это форма I-луча.
vertical-text horizontal i-beam Можно выбрать вертикальный текст.Обычно это форма бокового I-образного луча.
Перетаскивания alias wide arrow pointing up and to the left partially obscuring a smaller folder icon with a curved arrow pointing up and to the right Необходимо создать псевдоним или ярлык.
copy wide arrow pointing up and to the left partially obscuring a smaller folder icon with a plus sign Что-то нужно скопировать.
move plus sign made of two thin lines. The four points are small arrows facing out Что-то нужно переместить.
no-drop pointer icon and a not allowed icon Элемент не может быть уронен в текущем местоположении.
ошибка 275173 : в Windows и macOS no-drop на удаление аналогичен запрету на not-allowed .
not-allowed Not allowed icon, which is a circle with a line through it Запрошенные действия не будут осуществлены.
grab fully opened hand icon Что-то можно схватить (перетащить,чтобы переместить).
grabbing closed hand icon, of the back of the hand Что-то схватили (перетащили,чтобы переместить).
Изменение размера и прокрутка all-scroll icon of a medium size dot with four triangles around it. Что-то можно прокрутить в любом направлении (панорамированием).
ошибка 275174 : В Windows, all-scroll — то же самое, что и move .
col-resize col-resize.gif Элемент/столбец может быть изменен по горизонтали.Часто визуализируется как стрелки,указывающие влево и вправо с вертикальной полосой,разделяющей их.
row-resize Элемент/ряд может быть изменен по вертикали.Часто визуализируется как стрелки,указывающие вверх и вниз с горизонтальной полосой,разделяющей их.
n-resize thin long arrow pointing towards the top Некоторый край должен быть перемещен. Например, курсор se-resize используется, когда движение начинается с юго-восточного угла поля.
В некоторых средах отображается эквивалентный двунаправленный курсор изменения размера. Например, n-resize и s-resize такие же, как ns-resize .
e-resize thin long arrow pointing towards the right
s-resize thin long arrow pointing down
w-resize thin long arrow pointing towards the left
ne-resize thin long arrow pointing top-right
nw-resize thin long arrow pointing top-left
se-resize thin long arrow pointing bottom-right
sw-resize thin long arrow pointing bottom-left
ew-resize thin long arrow pointing left and right Двунаправленный курсор изменения размера.
ns-resize thin long arrow pointing up and down
nesw-resize thin long arrow pointing both to the top-right and bottom-left
nwse-resize thin long arrow pointing both to the top-left and bottom-right
Zooming zoom-in magnifying glass with a plus sign

Что-то можно увеличить (увеличить)или уменьшить.
zoom-out magnifying glass with a minus sign

Formal definition

Formal syntax

cursor =   [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 | zoom-in | zoom-out ]

Usage notes

Ограничения на размер значков

Хотя спецификация не ограничивает размер изображения cursor пользовательские агенты обычно ограничивают их, чтобы избежать потенциального неправильного использования. Например, в Firefox и Chromium изображения курсора по умолчанию ограничены размером 128×128 пикселей, но рекомендуется ограничить размер изображения курсора до 32×32 пикселей. Изменения курсора с использованием изображений, размер которых превышает максимально поддерживаемый размер пользовательского агента, обычно просто игнорируются.

Поддерживаемые форматы файлов изображений

Спецификация требует от пользовательских агентов поддерживать файлы PNG, файлы SVG v1.1 в безопасном статическом режиме, которые содержат натуральный размер, и любые другие форматы файлов неанимированных изображений, которые они поддерживают для изображений с другими свойствами. Настольные браузеры также широко поддерживают формат файлов .cur .

Спецификация также указывает, что пользовательские агенты должны также поддерживать файлы SVG v1.1 в безопасном анимированном режиме, которые содержат естественный размер, наряду с любыми другими форматами файлов анимированных изображений, которые они поддерживают для изображений в других свойствах. Пользовательские агенты могут поддерживать как статические, так и анимированные изображения SVG, которые не имеют естественного размера.

Other notes

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

Examples

Настройка типов курсора

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}


.baz {
  cursor: url("hyper.cur"), auto;
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
cursor

1

12

1

Начиная с Firefox 67,максимальный размер,разрешенный для пользовательских курсоров,составляет 32×32 пикселя в связи с тем,что курсоры неправомерно используются некоторыми вредоносными сайтами.

4

В Internet Explorer 11, когда cursor применяется к элементу, и этот элемент находится под открытым <select> и пользователь наводит курсор на элемент меню <select> , который находится над указанным элементом, курсор для указанного элемента будет отображаться скорее чем обычный курсор <select> . Смотрите ошибку 817822 .

7

1.2

No

18

95

14

1

1.0
alias

1

12

1.5

10

10.6

3

No

18

95

14

1

1.0
all-scroll

1

12

1.5

6

10.6

3

No

18

95

14

1

1.0
auto

1

12

1

4

7

1.2

No

18

95

14

1

1.0
bidirectional_resize

1

12

1.5

10

10.6

3

No

18

95

14

1

1.0
cell

1

12

1.5

10

10.6

3

No

18

95

14

1

1.0
col-resize

1

12

1.5

6

10.6

3

No

18

95

14

1

1.0
context-menu

1

Этот курсор поддерживается только на MacOS и Linux.

12

1.5

Этот курсор поддерживается только на MacOS и Linux.

10

10.6

3

No

18

Этот курсор поддерживается только на MacOS и Linux.

95

14

Этот курсор поддерживается только на MacOS и Linux.

1

1.0

Этот курсор поддерживается только на MacOS и Linux.
copy

1

12

1.5

10

10.6

3

No

18

95

14

1

1.0
crosshair

1

12

1

4

7

1.2

No

18

95

14

1

1.0
default

1

12

1

4

7

1.2

No

18

95

14

1

1.0
grab

68

Chrome также продолжает поддерживать префиксные версии.

1

В Chrome 22 добавлена поддержка Windows.

14

27

1.5

No

55

Opera также продолжает поддерживать версии с префиксами.

15

В Opera 22 добавлена поддержка Windows.

11

4

No

68

Chrome также продолжает поддерживать префиксные версии.

18

В Chrome 22 добавлена поддержка Windows.

95

48

Opera также продолжает поддерживать версии с префиксами.

14

В Opera 22 добавлена поддержка Windows.

1

10.0

1.0
help

1

12

1

4

7

1.2

No

18

95

14

1

1.0
inherit

1

12

1

8

9

1.2

No

18

95

14

1

1.0
move

1

12

1

4

7

1.2

No

18

95

14

1

1.0
no-drop

1

12

1.5

6

10.6

3

No

18

95

14

1

1.0
none

5

12

3

9

15

5

No

18

95

14

4.2

1.0
not-allowed

1

12

1.5

6

10.6

3

No

18

95

14

1

1.0
pointer

1

12

1

6

7

1.2

No

18

95

14

1

1.0
progress

1

12

1

6

7

1.2

No

18

95

14

1

1.0
row-resize

1

12

1.5

6

10.6

3

No

18

95

14

1

1.0
text

1

12

1

4

7

1.2

No

18

95

14

1

1.0
unidirectional_resize

1

12

1

4

7

1.2

No

18

95

14

1

1.0
url

1

12

1.5

Firefox 4 добавил поддержку макросов.

6

15

3

No

18

95

14

1

1.0
url_positioning_syntax

1

79

1.5

Firefox 4 добавил поддержку макросов.

No

15

3

No

18

95

14

1

1.0
vertical-text

1

12

1.5

No

10.6

3

No

18

95

14

1

1.0
wait

1

12

1

4

7

1.2

No

18

95

14

1

1.0
zoom

37

1

12

24

1

No

24

15-23

9

3

No

37

18

95

24

14-24

1

3.0

1.0

See also

  • pointer-events
  • url() function

CSS

  • Пользовательские свойства CSS для каскадных переменных

    CSS Custom Properties for Cascading Variables-это модуль,который позволяет создавать и использовать более и Последнее изменение:17 августа 2022 года,авторский коллектив MDN

  • режимы записи CSS

    CSS Writing Modes-это модуль,определяющий различные международные режимы,такие как «слева направо» (например.

  • <custom-ident>

    Тип данных CSS <custom-ident> обозначает произвольную определяемую пользователем строку, используемую в качестве идентификатора.

  • Descendant combinator

    Комбинатор потомков,обычно представленный одним символом пробела,объединяет два селектора таким образом,что элементы,совпадающие со вторым,выбираются,если они

Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

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

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии