Курсор — 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(…), …, указывающие на файл изображения.
<x><y>Экспериментальная возможностьНеобязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
- Ключевые слова
Наведите курсор на картинку, чтобы увидеть пример в действии:
Категория Значение Вид Описание Основные autoБраузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.
Например: при наведении на текст отобразит курсорtext.defaultОсновной курсор платформы, обычно стрелочка. noneКурсор не отображается. helpДоступна вспомогательная информация. pointerУказатель, обозначающий ссылку, обычно указующая рука. progressПрограмма занята, но пользователь может взаимодействовать с интерфейсом (в отличие от waitПрограмма занята (песочные часы). Выделение cellУказывает на возможность выбора клетки или клеток таблицы. crosshairКрестик, часто используемый для обозначения выбора на битовой карте. textЗначок выбора текста. vertical-textЗначок выбора вертикального текста. «Захвати и перенеси» aliasБудет создана ссылка внутри страницы. copyУказывает на возможность копирования. moveУказывает на возможность перемещения объекта.
no-dropУказывает на невозможность «сбрасывания» объекта.
В Windows и Mac OSX то же самое что иnot-allowed.not-allowedУказатель невозможности выполнения действия. Изменение размера, прокручивание (скроллинг) all-scrollУказатель возможности перемещения по странице в любом направлении.
в Windows то же самое чтоcol-resizeОбъект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны. row-resizeОбъект может быть раздвинут/сдвинут вертикально. Две горизонтальные
черты с вертикальными стрелочками.n-resizeГрань или грани могут быть перемещены. Например se-resizeиспользуется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.e-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizeДвунаправленное изменение размера. ns-resizenesw-resizenwse-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.
Изменить курсор при наведении CSS
Иванова НатальяОбновлено: 11 февраля 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;}
totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}Posted in CSSПомеченные HTML
Опубликовано Иванова Наталья
Смотреть все записи от Иванова Наталья
html — меняет курсор на руку, когда мышь перемещается по строке в таблице
спросил
Изменено 3 месяца назад
Просмотрено 503 тыс. раз
Как изменить указатель курсора на руку, когда моя мышь проходит над в
sortable tr:hover{cursor:pointer;} /* только для этого */
context-menu {курсор:
контекстное меню;} 
url {курсор: url(myBall.cur),авто;} 
Браузер устанавливает курсор
Примечание: Всегда указывайте общий курсор в конце списка, если нельзя использовать ни один из курсоров, определяемых URL-адресом
Читать о унаследовать 