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>

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

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код 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>

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

Курсор — CSS | MDN

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`		Курсор не отображается.
`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`		Указывает на возможность схватить и переместить объект.

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

cursor = 
[ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)  "><url> = 
url( <string> (en-US) <url-modifier>* (en-US) )  | (en-US)
src( <string> (en-US) <url-modifier>* (en-US) )

. 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 with JavaScript enabled. Enable JavaScript to view data.

Using URL values for the cursor property
pointer-events
Cursor Property (MSDN)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 000Z»>7 нояб. 2022 г. by MDN contributors.

html — меняет курсор на руку, когда мышь перемещается по строке в таблице

спросил 11 лет, 1 месяц назад

Изменено 3 месяца назад

Просмотрено 503 тыс. раз

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

 <стиль границы таблицы:>

html
css
курсор мыши

На самом деле вы можете сделать это с помощью CSS.

 .sortable tr {
    курсор: указатель;
}

Я немного поискал стили начальной загрузки и нашел это:

 [role=button]{cursor:pointer}

Итак, я предполагаю, что вы можете получить то, что хотите, с помощью:

hi

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

 style="cursor: pointer;"

к вашим тегам.

Добавить курсор : указатель на ваш css.

Я добавил это в свой style.css для управления параметрами курсора:

 .cursor-pointer {cursor: pointer;}
.cursor-crosshair {курсор: перекрестие;}
.cursor-eresize {курсор: e-resize;}
.cursor-move {курсор: двигаться;}

Использовать стиль курсора : указатель; в CSS для элемента, на котором вы хотите изменить курсор.

В вашем случае вы должны использовать (в вашем файле .css):

 .sortable {
    курсор: указатель;
}

Для совместимости с IE < 6 используйте этот стиль в следующем порядке:

 .sortable:hover {
    курсор: указатель;
    курсор: рука;
}

Но помните, что IE < 7 поддерживает псевдокласс :hover только с элементом .

Используйте свойство CSS курсора следующим образом:

Имя	Возраст
Дженнифер	24
Кейт	36
Дэвид	25
Отметка	40

Конечно, вы должны поместить стиль в свой файл CSS и применить его к классу.

Пример со встроенными стилями:

Имя	Возраст
Дженнифер	24
Кейт	36
Дэвид	25
Отметка	40

наведите на меня указатель мыши

наведите на меня курсор мыши: подождите

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

Использование css

 table tr:hover{cursor:pointer;} /* Для всех таблиц*/
table. sortable tr:hover{cursor:pointer;} /* только для этого */

только для стандарта, вышеперечисленные решения работают, но если вы используете таблицы данных, вам необходимо переопределить настройки datatatables.css по умолчанию и добавить следующий код в пользовательский css. В приведенном ниже коде row-select — это класс, который я добавил на datatables, как показано в html.

 table.row-select.dataTable tbody td
{
курсор: указатель;
}

И ваш html будет выглядеть следующим образом:

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

спросил 11 лет, 2 месяца назад

Изменено 3 года, 5 месяцев назад

Просмотрено 235 тысяч раз

При просмотре моего сайта курсор меняется на руку в перчатке только для тегов , а не для тегов

Штирлиц — Сеть печатных салонов в Перми

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

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

Пример

Пример

Пример

Пример

Пример

Пример

Курсор — CSS | MDN

Значения

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

Found a content problem with this page?

html — меняет курсор на руку, когда мышь перемещается по строке в таблице

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

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