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

Содержание

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

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

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

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

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

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

Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (<li>) и установить стиль только для него.

Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента <li>.

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

li {
cursor: pointer;
}

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li{
      margin-bottom:15px;
      }
      li.pointer {
      cursor: pointer;
      }
      li:hover {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h5>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель:</h5>
    <ul>
      <li>Элемент списка 1 с курсором по умолчанию.</li>
      <li>Элемент списка 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>
    <h5>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default":</h5>
    <p><a href="https://www.w3docs.com">W3docs</a> ссылка с исходным видом "pointer".</p>
    <p><a 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>
    <h3>Какое у вас впечатление от нашей веб-страницы?</h3>
    <button>Радостное</button>
    <button>Грустное</button>
    <button>Влюбленное</button>
  </body>
</html>

(adsbygoogle = window.adsbygoogle || []).push({});

Попробуйте сами!

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код 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 src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus">
    <img src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature">
    <img src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog">
    <img 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>
    <h3>Пример свойства cursor</h3>
    <p> Наведите курсор мыши на элемент и увидите изменения:</p>
    <div>
      <div>auto</div>
      <div>default</div>
      <div>none</div>
      <div>context-menu</div>
      <div>help</div>
      <div>pointer</div>
      <div>progress</div>
      <div>wait</div>
      <div>cell</div>
      <div>crosshair</div>
      <div>text</div>
      <div>vertical-text</div>
      <div>alias</div>
      <div>copy</div>
      <div>move</div>
      <div>no-drop</div>
      <div>not-allowed</div>
      <div>all-scroll</div>
      <div>col-resize</div>
      <div>row-resize</div>
      <div>n-resize</div>
      <div>s-resize</div>
      <div>e-resize</div>
      <div>w-resize</div>
      <div>ns-resize</div>
      <div>ew-resize</div>
      <div>ne-resize</div>
      <div>nw-resize</div>
      <div>se-resize</div>
      <div>sw-resize</div>
      <div>nesw-resize</div>
      <div>nwse-resize</div>
      <div>grab</div>
      <div>grabbing</div>
      <div>zoom-in</div>
      <div>zoom-out</div>
    </div>
  </body>
</html>

Попробуйте сами!

cursor — CSS — Дока

Кратко

Секция статьи «Кратко»

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

Пример

Секция статьи «Пример»

Пусть будет обычный блок статьи:

<article>  <h3>Какая-то статья</h3>  <div>    <p>      Многие кометы имеют два хвоста, однако солнечное затмение однократно.      Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже      знаем, полнолуние непрерывно.    </p>  </div></article>
          <article>
  <h3>Какая-то статья</h3>
  <div>
    <p>
      Многие кометы имеют два хвоста, однако солнечное затмение однократно.
      Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже
      знаем, полнолуние непрерывно.
    </p>
  </div>
</article>

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

article {  cursor: url(cat.png) 2 2, default;}
          article {
  cursor: url(cat.png) 2 2, default;
}

Спойлер: может не работать в Google Chrome. Лучше смотреть в Firefox или Safari.

Если навести курсор на блок статьи, то увидите картинку котика вместо привычной стрелочки.

Открыть демо в новой вкладке

Как пишется

Секция статьи «Как пишется»

Есть набор стандартизированных значений:

auto — браузер сам решит какой курсор показывать в зависимости от того, на какой элемент он наведён. Например, для ссылки это будет рука с пальчиком, для поля ввода чёрточка, а для обычного блока — стандартная стрелка.
default — обычная, привычная стрелочка.
none — курсора совсем нет.
pointer — курсор, который обычно появляется над нажимаемыми элементами типа ссылок.
text — курсор в виде чёрточки с засечками сверху и снизу. Обычно показывается там, где текст может быть выбран, выделен.
Остальные, менее популярные значения:
- context-menu — курсор контекстного меню (обычно вызывается правой кнопкой мыши).
- help — доступен вспомогательный информационный контент.
- progress — программа в фоне выполняет какие-то действия, но пользователь всё ещё может с ней взаимодействовать.
- wait — программа не отвечает, занята обработкой какой-то операции.
- cell — можно выбрать одну или несколько ячеек таблицы.
- crosshair — курсор-крестик, обычно используется, чтобы показать, что на изображении можно выбрать какую-то область.
- vertical-text — практически как text, но вертикально.
- alias — загнутая стрелочка, так обозначают ссылки, клик по которым уведёт с текущего сайта.
- copy — содержимое можно скопировать.
- move — содержимое можно подвигать.
- no-drop — в эту область нельзя перетащить файл.
- not-allowed — действие не будет выполнено.
- grab — содержимое можно схватить, чтобы перетащить.
- grabbing — содержимое было схвачено для перетаскивания.
- all-scroll — содержимое может быть проскроллено в любом направлении.
- col-resize — колонку / ячейку таблицы можно изменить в размерах по горизонтали.
- row-resize — строку в таблице или другой элемент можно изменить в размерах по вертикали.
- zoom-in — содержимое можно приблизить, увеличить.
- zoom-out — содержимое можно отдалить, уменьшить.

Демо со всеми перечисленными курсорами:

Открыть демо в новой вкладке

Внешне курсоры могут отличаться в разных операционных системах.

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

selector {  cursor: url(cat.png), auto;}
          selector {
  cursor: url(cat.png), auto;
}

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

Можно указывать несколько картинок подряд. Будет показана первая из доступных.

selector {  cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;}
          selector {
  cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;
}

Для каждой из картинок можно после закрывающей круглой скобки указать позицию курсора-картинки.

selector {  cursor: url(cat.png) 2 2, auto;}
          selector {
  cursor: url(cat.png) 2 2, auto;
}

В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.

Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.

Как это понять

Секция статьи «Как это понять»

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

Обычно на простых сайтах нужны всего два значения: pointer и default. Поскольку контент там во многом состоит из текста и ссылок / кнопок.

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

Подсказки

Секция статьи «Подсказки»

💡 Если используете картинку вместо курсора, то используйте небольшое изображение, поскольку нельзя явно указать размеры отображаемого курсора. Лучше не злоупотреблять, чтобы не перекрыть часть контента на странице.

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

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

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

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

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

Как изменить вид курсора, используя возможности CSS. Для этого в код ссылки вида <a href=»URL СТРАНИЦЫ»> ВАШ ТЕКСТ</a> или для изменения курсора на наведение на текст абзаца: <p> Текст </p> или в другой HTML код вставляем стиль желаемого курсора, которые вы видите ниже в таблице:

Внешний вид	Встроенный стиль в html код	CSS код	Описание
	style=»cursor: crosshair;»	a	Крестик
	style=»cursor: pointer;»	a	рука
	style=»cursor: move;»	a	перекрещенные стрелки
	style=»cursor: e-resize;»	a	стрелка вправо
	style=»cursor: ne-resize;»	a	стрелка вверх и вправо
	style=»cursor: nw-resize;»	a	стрелка вверх и влево
	style=»cursor: n-resize;»	a	стрелка вверх
	style=»cursor: sw-resize;»	a	стрелка вниз и влево
	style=»cursor: se-resize;»	a	стрелка вниз и вправо
	style=»cursor: s-resize;»	a	стрелка вниз
	style=»cursor: w-resize;»	a	стрелка влево
	style=»cursor: text;»	a	курсор текст
	style=»cursor: wait;»	a	песочные часы
	style=»cursor: help;»	a	помощь, вопросительный знак
	style=»cursor: default;»	a	обычный
	style=»cursor: grab;»	a	взять рукой
	style=»cursor: zoom-in;»	a	лупа увеличение
	style=»cursor: zoom-out;»	a	лупа уменьшение
	style=»cursor: cell;»	a	плюс
	style=»cursor: not-allowed;»	a	запрет
style=»cursor: url(url картинки), progress;»	a	любое изображение

Таким образом получаем курсор вида (наведите на ссылку): Помощь

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

Небольшая деталь — изменение курсора не работает в старых версиях Опера и Internet Explorer.

Курсор на WordPress

Пропишите изменения курсора в файле style.css

Также вы можете прописать класс

HTMl-код в редакторе сообщения:

Как изменить курсор в blogger

Вы можете использовать встроенный стиль, тогда вам нужно будет править в редакторе сообщения или изменить стиль курсора во всём блоге, прописав CSS:

Cursor CSS

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

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

Синтаксис

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

При этом вместо 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 .

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

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

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

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

Как изменить курсор браузера с помощью CSS

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

Думайте, куда наводите указатель

Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.

Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.

Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.

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

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

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

Мы рассмотрим следующие способы управления удобством использования курсора:

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

Если вы хотите превратить указатель мыши в указатель руки при наведении курсора на элемент списка, вы можете установить класс для элемента списка (

) и определить стиль только для этого элемента.

Но если вы хотите иметь указатель в виде руки для всех элементов списка, просто установите стиль для элемента

Теперь давайте рассмотрим пример изменения указателя мыши на указатель руки с помощью значения «указатель» свойства курсора . Мы устанавливаем этот тип курсора только в классе «указатель».

Пример замены указателя мыши на указатель руки:

 

  <голова>
    Название документа
    <стиль>
      ли {
        нижняя граница: 15px;
      }
      li.указатель {
        курсор: указатель;
      }
      ли: наведите {
        цвет фона: #ccc;
      }
    
  
  <тело>
     Наведите курсор на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель: 
    <ул>
      Элемент списка 1 с курсором по умолчанию.
      Выведите элемент списка 2 с помощью курсора-указателя.
      Еще один элемент списка с курсором мыши по умолчанию.

Попробуй сам »

Результат

Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию изменится на указатель:

Элемент списка 1 с курсором по умолчанию.
Элемент списка 2 с курсором-указателем.
Другой элемент списка с курсором мыши по умолчанию.

В следующем примере используется селектор :nth-child. Здесь мы используем nth-child(нечетный) для курсора: progress; и nth-child(even) для курсора: указатель; иметь разные типы курсоров для разных элементов списка.

Пример использования указателя и курсора прогресса:

 

  <голова>
    Название документа
    <стиль>
      li: nth-ребенок (нечетный) {
        фон: #1c87c9;
        курсор: прогресс;
        ширина: 50%;
        отступ: 5px;
      }
      li: nth-ребенок (четный) {
        фон: #ccc;
        курсор: указатель;
        ширина: 50%;
        отступ: 5px;
      }
    
  
  <тело>
    Наведите курсор на элементы списка, чтобы увидеть, как меняется курсор:
    <ул>
      Элемент 1
      Элемент 2
      Элемент 3. 
      Элемент 4.
      Элемент 5.
      Элемент 6.
      Элемент 7.

Попробуй сам »

Курсором по умолчанию для гиперссылки является «указатель». Чтобы изменить его, вам нужно указать тип курсора для вашего элемента с помощью селектора CSS :hover. В нашем примере мы стилизуем только класс «ссылка».

Пример изменения «указателя» на «по умолчанию»:

<голова> Название документа <стиль> .ссылка:наведите { курсор: по умолчанию; } <тело>

Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» меняется на «по умолчанию»:

<р> W3docs ссылка с исходным типом "указатель".

<р> W3docs ссылка с измененным типом курсора "по умолчанию".

Попробуй сам »

Поскольку по умолчанию ссылки имеют синий цвет и подчеркнуты, мы предлагаем изменить цвета ссылок и пойти дальше с гиперссылками.

Прочтите статью «Как изменить цвет ссылок с помощью CSS», чтобы узнать больше о ссылках.

Пример использования типа курсора «захватить» на гиперссылке:

 

  <голова>
    Название документа
    <стиль>
      а {
        курсор: захватить;
      }
    
  
  <тело>

Попробуй сам »

Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его URL-адрес в качестве значения свойства курсора .

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

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

Пример добавления изображения в качестве курсора:

 

  <голова>
    Название документа
    <стиль>
      тело {
        фон: #еее;
        выравнивание текста: по центру;
      }
      кнопка {
        отображение: встроенный блок;
        цвет фона: #1c87c9;
        цвет: #еее;
        поле: 25 пикселей;
        положение: родственник;
        ширина: 140 пикселей;
        высота: 45 пикселей;
        радиус границы: 3px;
        граница: нет;
        размер шрифта: 1.5em;
        выравнивание текста: по центру;
        текстовое оформление: нет;
        box-shadow: 0 2px 8px 0 #999;
      }
      кнопка:наведите {
        цвет фона: #999;
        цвет: #ffcc00;
      }
      #счастливый {
        курсор: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5. png"), авто;
      }
      #грустный {
        курсор: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), авто;
      }
      #любовь {
        курсор: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), авто;
      }
    
  
  <тело>
     Какое у вас впечатление о нашем веб-сайте?

Попробуй сам »

Пример использования значков в качестве курсора:

 

  <голова>
    Название документа
    <стиль>
      тело {
        ширина: 600 пикселей;
        поле: 0.5em авто;
      }
      картинка {
        ширина: 280 пикселей;
        высота: 186 пикселей;
        поле: 5px;
        отображение: встроенный блок;
        фоновая позиция: 50% 50%;
      }
      .собака {
        курсор: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6. png"), авто;
      }
      .кактус {
        курсор: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), авто;
      }
      .природа {
        курсор: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
      }
      .дом {
        курсор: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), авто;
      }
    
  
  <тело>

Попробуй сам »

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

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

Для значений «увеличение», «уменьшение», «захват» и «захват» добавлено расширение свойства -webkit-.

Пример использования всех типов курсоров:

 

  <голова>
    Название документа
    <стиль>
      тело {
        выравнивание текста: по центру;
        семейство шрифтов: Roboto, Helvetica, Arial, без засечек;
      }
      .курсор {
        дисплей: гибкий;
        flex-wrap: обернуть;
      }
      .курсор > раздел {
        гибкий: 120 пикселей;
        отступ: 10 пикселей 2 пикселя;
        пробел: nowrap;
        граница: 1px сплошная #666;
        радиус границы: 5px;
        поля: 0 5px 5px 0;
      }
      .курсор> div:наведите {
        фон: #1c87c9;
      }
      .авто {
        курсор: авто;
      }
      .дефолт {
        курсор: по умолчанию;
      }
      . никто {
        курсор: нет;
      }
      .контекстное меню {
        курсор: контекстное меню;
      }
      .помощь {
        курсор: помощь;
      }
      .указатель {
        курсор: указатель;
      }
      .прогресс {
        курсор: прогресс;
      }
      .ждать {
        курсор: подождите;
      }
      .клетка {
        курсор: ячейка;
      }
      .прицел {
        курсор: перекрестие;
      }
      .текст {
        курсор: текст;
      }
      .вертикальный текст {
        курсор: вертикальный текст;
      }
      .псевдоним {
        курсор: псевдоним;
      }
      .копировать {
        курсор: копировать;
      }
      .шаг {
        курсор: двигаться;
      }
      .no-drop {
        курсор: без выпадения;
      }
      .не допускается {
        курсор: не разрешено;
      }
      .все прокрутки {
        курсор: вся прокрутка;
      }
      .col-изменить размер {
        курсор: изменить размер столбца;
      }
      . row-изменить размер {
        курсор: изменение размера строки;
      }
      .n-изменить размер {
        курсор: n-изменить размер;
      }
      .e-изменить размер {
        курсор: изменить размер;
      }
      .s-изменить размер {
        курсор: s-изменить размер;
      }
      .w-изменить размер {
        курсор: w-изменить размер;
      }
      .ns-изменить размер {
        курсор: ns-изменить размер;
      }
      .ew-изменить размер {
        курсор: ew-изменить размер;
      }
      .ne-изменить размер {
        курсор: изменить размер;
      }
      .nw-изменить размер {
        курсор: nw-изменить размер;
      }
      .se-изменить размер {
        курсор: se-изменить размер;
      }
      .sw-изменить размер {
        курсор: sw-изменить размер;
      }
      .new-изменить размер {
        курсор: новое изменение размера;
      }
      .nwse-изменить размер {
        курсор: nwse-изменить размер;
      }
      .схватить {
        курсор: -webkit-grab;
        курсор: захватить;
      }
      . хват {
        курсор: -webkit-grabbing;
        курсор: захват;
      }
      .увеличить {
        курсор: -webkit-увеличить;
        курсор: увеличение;
      }
      .уменьшить {
        курсор: -webkit-уменьшить масштаб;
        курсор: уменьшить масштаб;
      }
    
  
  <тело>
     Пример свойства курсора 
     Наведите курсор мыши на элемент, чтобы увидеть изменения:
    <дел>
      авто
      по умолчанию
      нет
      контекстное меню
      помощь
      указатель
      прогресс
      подождите
      ячейка
      прицел
      текст
      вертикальный текст
      псевдоним
      копировать
      переместить
      без сброса
      запрещено
      все-прокрутить
      изменить размер столбца
      изменить размер строки
      n-изменить размер
      s-изменить размер
      электронное изменение размера
      w-изменить размер
      ns-изменить размер
      изменить размер
      изменить размер
      nw-изменить размер
      se-изменить размер
      sw-изменить размер
      новый размер
      nwse-изменить размер
      захватить
      захват
      увеличить
      уменьшить

Попробуй сам »

Свойство курсора CSS

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

CSS может генерировать множество различных курсоров мыши:

. alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {курсор: авто;}
.cell {курсор: ячейка;}
.col-resize {курсор: col-resize;}
.context-menu {курсор: контекстное меню;}
.copy {курсор: копировать;}
.crosshair {курсор: перекрестие;}
.default {курсор: по умолчанию;}
.e-resize {курсор: e-resize;}
.ew-resize {курсор: ew-resize;}
.grab {курсор: захватить;}
.grabbing {курсор: захват;}
.help {курсор: помощь;}
.move {курсор: перемещение;}
.n-resize {курсор: n-resize;}
.ne-resize {курсор: ne-resize;}
.nesw-resize {курсор: nesw-resize;}
.ns-resize {курсор: ns-resize;}
.nw-resize {курсор: nw-resize;}
.nwse-resize {курсор: nwse-resize;}
.no-drop {курсор: no-drop;}
.none {курсор: нет;}
.not-allowed {курсор: не разрешен;}
.pointer {курсор: указатель;}
.progress {курсор: прогресс;}
.row-resize {курсор: row-resize;}
. s-resize {курсор: s-resize;}
.se-resize {курсор: se-resize;}
.sw-resize {курсор: sw-resize;}
.text {курсор: текст;}
.url {курсор: url(myBall. cur),auto;}
.w-resize {курсор: w-resize;}
.wait {курсор: ожидание;}
.zoom-in {курсор: увеличение;}
.zoom-out {курсор: уменьшение;}

Попробуйте сами »

Определение и использование

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

Значение по умолчанию:	авто
По наследству:	да
Анимация:	нет. Читать о анимированном
Версия:	CSS2
Синтаксис JavaScript:	объект .style.cursor=»перекрестие» Попытайся

Поддержка браузера

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

Недвижимость
курсор	5,0	5,5	4,0	5,0	9,6

Синтаксис CSS

курсор: значение ;

Значения свойств

Значение	Описание	Демо
псевдоним	Курсор указывает, что необходимо создать псевдоним чего-либо	Играй »
прокрутка	Курсор указывает, что что-то можно прокручивать в любом направлении	Играй »
авто	По умолчанию. Браузер устанавливает курсор	Играй »
ячейка	Курсор указывает, что ячейка (или набор ячеек) может быть выбрана	Играй »
изменение размера цвета	Курсор указывает, что размер столбца можно изменить по горизонтали	Играть »
контекстное меню	Курсор указывает, что контекстное меню доступно	Играй »
копия	Курсор указывает, что что-то нужно скопировать	Играй »
перекрестие	Курсор визуализируется как перекрестие	Играй »
по умолчанию	Курсор по умолчанию	Играй »
электронное изменение размера	Курсор указывает, что край блока должен быть перемещен вправо (на восток)	Играй »
ew-изменить размер	Указывает на двунаправленный курсор изменения размера	Играй »
захват	Курсор указывает, что что-то можно захватить	Играй »
захват	Курсор указывает, что что-то можно захватить	Играй »
помощь	Курсор указывает, что справка доступна	Играй »
переместить	Курсор указывает, что что-то нужно переместить	Играй »
n-изменить размер	Курсор указывает, что край блока должен быть перемещен вверх (на север)	Играй »
изменение размера	Курсор указывает, что край прямоугольника нужно переместить вверх и вправо (север/восток)	Играй »
новое изменение размера	Указывает на двунаправленный курсор изменения размера	Играй »
нс-изменить размер	Указывает на двунаправленный курсор изменения размера	Играй »
nw-изменить размер	Курсор указывает, что край прямоугольника нужно переместить вверх и влево (север/запад)	Играй »
изменение размера nwse	Указывает на двунаправленный курсор изменения размера	Играй »
бескапельный	Курсор указывает, что перетаскиваемый элемент нельзя перетащить сюда	Играй »
нет	Курсор не отображается для элемента	Играй »
не разрешено	Курсор указывает, что запрошенное действие не будет выполнено	Играй »
указатель	Курсор является указателем и указывает на ссылку	Играй »
прогресс	Курсор указывает, что программа занята (выполняется)	Играй »
изменение размера строки	Курсор указывает, что размер строки можно изменить по вертикали	Играй »
s-изменить размер	Курсор указывает, что край прямоугольника должен быть перемещен вниз (на юг)	Играй »
изменение размера	Курсор указывает, что край прямоугольника нужно переместить вниз и вправо (юг/восток)	Играй »
SW-изменить размер	Курсор указывает, что край прямоугольника должен быть перемещен вниз и влево (юг/запад)	Играй »
текст	Курсор указывает на текст, который можно выбрать	Играй »
URL-адрес	Разделенный запятыми список URL-адресов пользовательских курсоров. Примечание: Всегда указывайте общий курсор в конце списка, если нельзя использовать ни один из курсоров, определяемых URL-адресом	Играй »
вертикальный текст	Курсор указывает на вертикальный текст, который можно выбрать	Играй »
w-изменить размер	Курсор указывает, что край прямоугольника должен быть перемещен влево (на запад)	Играй »
ждать	Курсор указывает, что программа занята	Играй »
увеличение	Курсор указывает, что что-то можно увеличить	Играй »
уменьшение	Курсор указывает, что что-то можно уменьшить	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Ссылка HTML DOM: свойство курсора

❮ Предыдущий Полное руководство по CSS Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Как Учебник
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

курсор — CSS: Каскадные таблицы стилей

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

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

 /* Значение ключевого слова */
курсор: авто;
курсор: указатель;
/* … */
курсор: уменьшить масштаб;
/* URL с обязательным резервным ключевым словом */
курсор: url(hand.cur), указатель;
/* URL и координаты с обязательным резервным ключевым словом */
курсор: url(cursor_1.png) 4 12, авто;
курсор: url(cursor_2.png) 2 2, указатель;
/* URL-адреса и резервные URL-адреса (некоторые с координатами) с обязательным резервным ключевым словом */
курсор: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5,
  прогресс;
/* Глобальные значения */
курсор: наследовать;
курсор: инициал;
курсор: вернуться;
курсор: вернуть слой;
курсор: не установлен;

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

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

Значения

Дополнительно

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

Дополнительно

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

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

ключевое слово

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

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

 курсор = 
 [ [  |  ] [   ]? ]#? [ авто | по умолчанию | нет | контекстное меню | помощь | указатель | прогресс | ждать | ячейка | перекрестие | текст | вертикальный текст | псевдоним | копировать | двигаться | без выпадения | не разрешено | захватить | захват | электронное изменение размера | n-изменить размер | изменить размер | nw-изменить размер | s-изменить размер | se-изменить размер | SW-изменить размер | w-изменить размер | ew-изменить размер | нс-изменить размер | новое изменение размера | nwse-изменить размер | цвет изменить размер | изменение размера строки | все прокрутить | увеличение | уменьшить ]

Ограничение размера значка

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

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

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

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

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

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

Пример

Пример

Пример

Пример

Пример

Пример

cursor — CSS — Дока

Кратко

Пример

Как пишется

Как это понять

Подсказки

На практике

Алёна Батицкая советует

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

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

Курсор на WordPress

Как изменить курсор в blogger

Cursor CSS

Синтаксис

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

Как изменить курсор браузера с помощью CSS

Думайте, куда наводите указатель

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

Пример замены указателя мыши на указатель руки:

Наведите курсор на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:

Результат

Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию изменится на указатель:

Пример использования указателя и курсора прогресса:

Пример изменения «указателя» на «по умолчанию»:

Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» меняется на «по умолчанию»:

Пример использования типа курсора «захватить» на гиперссылке:

Пример добавления изображения в качестве курсора:

Какое у вас впечатление о нашем веб-сайте?

Пример использования значков в качестве курсора:

Пример использования всех типов курсоров:

Пример свойства курсора

Свойство курсора CSS

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Связанные страницы

ВЫБОР ЦВЕТА

КОД ИГРЫ

Лучшие учебники

Лучшие примеры

курсор — CSS: Каскадные таблицы стилей

Значения

Ограничение размера значка

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики