Css рука при наведении: Курсор - CSS

Содержание

Курсор — 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)

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

Last modified: 7 нояб. 2022 г., by MDN contributors

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

Иванова НатальяОбновлено: 11 февраля 2021Опубликовано13 сентября, 202011 февраля, 2021

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

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

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

Ссылка

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

или такой , можете найти или нарисовать сами курсор на свой вкус.

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

Курсор на WordPress

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

Примеры:

P {cursor: crosshair;}
a {cursor: move;}
h3 {cursor: help;}

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

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

<p> текст с измененным курсором </p>

CSS-стиль:

.cross { cursor: crosshair; }

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

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

Найдите в шаблоне блога код ]]>

Добавьте перед ним код

body, a, a:hover {cursor: url(ссылка на изображение курсора), progress;}

В моем примере я вставила код:

body, a, a:hover {cursor: url(http://cursors3. totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}

Posted in CSSПомеченные HTML

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

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

спросил 10 лет, 9 месяцев назад

Изменено 11 месяцев назад

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

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

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

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

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

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

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

 [role=button]{cursor:pointer}

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

hi

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

 style="cursor: pointer;"

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

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

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

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

Использовать стиль курсора : указатель; в 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

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

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

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

 

  <голова>
    Название документа
    <стиль>
      а {
        курсор: захватить;
      }
    
  
  <тело>
     w3docs.com/" aria-label="домашняя страница w3docs">

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

Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его 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"), авто;
      }
    
  
  <тело>
    
    
     png" alt="dog">

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

Вы также можете использовать значки с веб-сайтов, на которых предоставляется код 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-изменить размер {
 курсор: новое изменение размера;
 }
 .

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

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

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

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

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

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

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

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

Css рука при наведении: Курсор — CSS | MDN

Курсор — CSS | MDN

Значения

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

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

Курсор на WordPress

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

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

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

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

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

Результат

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

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

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