Как изменить вид курсора при наведении style css - Исправление ошибок и поиск оптимальных решений проблем

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

Для установления внешнего вида курсора используйте 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`		Основной курсор платформы, обычно стрелочка.
`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

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

Источник

Курсоры

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

В табл. 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.

asked Jun 21, 2010 at 19:45

user246114user246114

49.5k42 gold badges112 silver badges149 bronze badges

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

li { cursor: pointer; }

johannchopin

13.2k9 gold badges51 silver badges99 bronze badges

answered Jun 21, 2010 at 19:50

Use for li:

li:hover {
    cursor: pointer;
}

See more cursor properties with examples after running snippet option:

.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

5326 silver badges20 bronze badges

answered Jan 4, 2017 at 11:21

Santosh KhalseSantosh Khalse

11.6k3 gold badges35 silver badges36 bronze badges

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

li {cursor: pointer}

And voilà! Handy.

answered Jun 21, 2010 at 19:47

Use:

li:hover {
    cursor: pointer;
}

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

answered Jan 7, 2013 at 11:50

AlastairAlastair

6,7994 gold badges35 silver badges29 bronze badges

Use

cursor: pointer;
cursor: hand;

if you want to have a crossbrowser result!

answered Oct 27, 2011 at 7:34

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

19.5k8 gold badges46 silver badges82 bronze badges

answered Sep 11, 2014 at 7:51

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

answered Mar 2, 2014 at 12:40

ChristophChristoph

1,30016 silver badges28 bronze badges

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

answered Jun 5, 2013 at 21:52

XedretXedret

1,80318 silver badges24 bronze badges

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.

answered Aug 18, 2016 at 15:19

AvatarAvatar

14k8 gold badges116 silver badges190 bronze badges

For complete cross browser, use:

cursor: pointer;
cursor: hand;

answered Dec 5, 2012 at 19:46

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 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

vapcguyvapcguy

6,8971 gold badge53 silver badges48 bronze badges

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

AlirezaAlireza

98k27 gold badges266 silver badges171 bronze badges

Simply put this code.

li{cursor: pointer;}

answered Nov 25, 2021 at 8:23

FerozFeroz

4613 silver badges11 bronze badges

ul li:hover{
   cursor: pointer;
}

answered Dec 21, 2014 at 18:34

user3776645user3776645

3773 silver badges5 bronze badges

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

Apply the CSS property cursor:pointer; to the elements. (This is the default style when a cursor hovers over a button.)
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

AndrewAndrew

1,31214 silver badges20 bronze badges

Use:

ul li:hover{
   cursor: pointer;
}

For more mouse events, check CSS cursor property.

answered Feb 3, 2016 at 6:48

You can use one of the following:

li:hover
{
 cursor: pointer;
}

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 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

answered Dec 24, 2015 at 4:13

You can use the code below:

li:hover { cursor: pointer; }

Jared Forth

1,5676 gold badges19 silver badges31 bronze badges

answered Jun 6, 2018 at 9:54

Captain JKCaptain JK

1601 silver badge7 bronze badges

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

1,0501 gold badge14 silver badges29 bronze badges

answered Jun 19, 2016 at 11:19

Rohit NairRohit Nair

6093 gold badges7 silver badges22 bronze badges

You can also use the following style:

li {
    cursor: grabbing;
}

answered Sep 14, 2017 at 11:22

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

3,3732 gold badges35 silver badges40 bronze badges

answered Sep 29, 2018 at 5:48

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

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

Источник

За вид курсора отвечает CSS свойство «cursor». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.

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

Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:

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.

Установка своего курсора

Все браузеры дают возможность установить элементу свой курсор из файла по 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

Источник

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

Источник

Have you ever visited a website and been totally blown away by its amazing features? One of them might be a cool mouse cursor that is different from the regular arrow or pointer cursors you are used to.

This can really improve user experience, and lately I’ve been wondering how it works. So I started to do some research and I found out how it is done.

In this article, I will be explaining how to make a custom mouse cursor. By the end of this article you will learn how to make these cursors with two different methods, using CSS and JavaScript. Then you be will ready to vamp up your website with different creative cursors to keep your audience engaged. Ready? Let’s dive in.

Prerequisites

This article is beginner-friendly, but to understand some concepts you should have basic knowledge of:

HTML
Basic CSS
Basic JavaScript

Customizing a mouse cursor with CSS is pretty simple, as CSS already has a property to handle this. All we need to do is identify this property and use it.

As Frontend Engineers we use this property often – it is none other than the almighty cursor property. Yes, that property is what gives us the power to make a custom cursor of our choice.

Before we go to a practical example, let’s look at the values associated with the CSS cursor property. While most developers just use a few important ones, there are more we should look at.

A visual representation of all the CSS cursors.

From the above code snippet and from the results, you can see and test out different mouse cursors that CSS has by hovering your mouse cursor on each of those boxes containing the name of each CSS cursor property value.

Now how do I use CSS to customize a mouse cursor? To use this, you just have to tell CSS what image you intend to use and point the cursor property to the image URL using the url value.

body {
  cursor: url('image-path.png'),auto;
}

From the code snippet above, you can see I set this on the document body, so it can apply to the cursor no matter where it moves. It has the image specified in url().

The next value of the property is a fallback, just in case the image doesn’t load or can not be found maybe due to some internal glitches. I’m sure you wouldn’t want your website to be «cursor-less», so adding a fallback is very important. You can also add as many fallback URLs as you can or want.

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

You can also customize the cursor on a particular element or section of your webpage. Below is a CodePen example:

Using different customized cursor on different element on a webpage.

That is all there is to customizing cursors in CSS. Now let’s see how we can do this is JavaScript.

How to Make Custom Mouse Cursors with JavaScript

To make this happen with JavaScript, you need to manipulate the DOM to get the desired result.

First, let’s see the HTML:

The HTML

<div class="cursor rounded"></div>
<div class="cursor pointed"><div>

From the code snippet above, I created two divs to represent the cursor. The plan is to manipulate these divs from JavaScript so their movement over the webpage is scrolled by the JavaScript mousemove event using the X and Y coordinates of the mouse movement.

Now let’s get to the CSS part which will all make sense piece by piece.

How to style custom cursors with 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%;
}

Taking a look at the CSS code above, I disabled the cursor (remember cursor:none?). This will make the cursor go invisible, allowing our custom cursor only to display.

The divs I styled to give them a unique «cursor-like» look. You can absolutely do more with it, maybe add a background image, emoji, stickers and so on provided there are images. Now, let’s take a look at the JavaScript

How to use JavaScript to make the cursor move

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)

I added an event listener on the global window object to listen to any mouse movement. When the mouse moves, the moveCursor function expression is called and it receives the event object as a parameter. With this parameter I was able to get the X and Y coordinates on the mouse at any point on the page.

I already selected each kind of cursor from the DOM using JavaScript querySelector. So all I had to do was move them according to the X and Y coordinates of the mouse by controlling the transform properties on the style with the translate3d value. This will enable the divs to move when the mouse moves to any point on the webpage.

And the backticks you see are called template literals. This enables writing variables easily to append them to strings. The alternative would be to concat the variables to the strings.

Simple, right? That’s it!

Below is a CodePen sample and result of the above code snippet:

Custom mouse cursor using JavaScript.

Which Method Works Best?

Now it’s up to you as the developer to choose which method works best for you. You may choose to use CSS if you want to use some pretty emojis or images as a cursor. On the other hand, you might want to use JavaScript so you can customize complex shapes of your choice and animate the cursor’s movement.

Either way is fine, as long as you get your desired results and wow all your site’s visitors.

I hope you learnt a lot from this article, an d I am looking forward to seeing what you build with this knowledge.

For more CSS tips, follow me on Twitter.

Thanks for reading, See you next time.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

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

Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь 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.

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

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

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

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник