Курсор — 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 то же самое что
. movecol-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 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.![]() | любое изображение |
Таким образом получаем курсор вида (наведите на ссылку): Помощь
Ссылка
Как вариант вы можете изменить вид курсора в вашем блоге на 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 — меняет курсор на руку, когда мышь перемещается по строке в таблице
спросил
Изменено 3 месяца назад
Просмотрено 503 тыс. раз
Как изменить указатель курсора на руку, когда моя мышь проходит над
в
<стиль границы таблицы:>
- html
- css
- курсор мыши
1
На самом деле вы можете сделать это с помощью CSS.
.sortable tr { курсор: указатель; }
0
Я немного поискал стили начальной загрузки и нашел это:
[role=button]{cursor:pointer}
Итак, я предполагаю, что вы можете получить то, что хотите, с помощью:
hi
4
Самый простой способ, который я нашел, это добавить
style="cursor: pointer;"
к вашим тегам.
0
Добавить курсор : указатель
на ваш css.
Я добавил это в свой style.css
для управления параметрами курсора:
.cursor-pointer {cursor: pointer;} .cursor-crosshair {курсор: перекрестие;} .cursor-eresize {курсор: e-resize;} .cursor-move {курсор: двигаться;}
0
Использовать стиль курсора : указатель;
в 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 будет выглядеть следующим образом:
1
Свойство курсора CSS
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
CSS может генерировать несколько разных курсоров мыши:
.alias {cursor: alias;}
.all-scroll {курсор: 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-изменение размера;}
.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),авто;}
.w-resize
{курсор: w-resize;}
.wait {курсор: ожидание;}
.zoom-in {курсор: увеличение;}
.zoom-out {курсор: уменьшение;}
Попробуйте сами »
Определение и использование
Свойство cursor
указывает, какой курсор мыши будет отображаться при наведении на элемент.
Значение по умолчанию: | авто |
---|---|
По наследству: | да |
Анимация: | нет. Читать о анимированном |
Версия: | CSS2 |
Синтаксис JavaScript: | объект .style.cursor=»перекрестие» Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Собственность | |||||
---|---|---|---|---|---|
курсор | 5,0 | 5,5 | 4,0 | 5,0 | 9,6 |
Синтаксис CSS
курсор: значение ;
Значения свойств
Значение | Описание | Демо |
---|---|---|
псевдоним | Курсор указывает на создание псевдонима чего-либо | Играй » |
со всей прокруткой | Курсор указывает, что что-то можно прокручивать в любом направлении | Играй » |
авто | По умолчанию.![]() | Играй » |
ячейка | Курсор указывает, что ячейка (или набор ячеек) может быть выбрана | Играй » |
изменение размера цвета | Курсор указывает, что размер столбца можно изменить по горизонтали | Играй » |
контекстное меню | Курсор указывает, что контекстное меню доступно | Играй » |
копия | Курсор указывает, что что-то нужно скопировать | Играй » |
перекрестие | Курсор визуализируется как перекрестие | Играй » |
по умолчанию | Курсор по умолчанию | Играй » |
электронное изменение размера | Курсор указывает, что край блока должен быть перемещен вправо (на восток) | Играть » |
ew-изменить размер | Указывает на двунаправленный курсор изменения размера | Играй » |
захват | Курсор указывает, что что-то можно захватить | Играй » |
захват | Курсор указывает, что что-то можно захватить | Играй » |
помощь | Курсор указывает, что справка доступна | Играть » |
переместить | Курсор указывает, что что-то нужно переместить | Играй » |
n-изменить размер | Курсор указывает, что край прямоугольника должен быть перемещен вверх (на север) | Играй » |
изменение размера | Курсор указывает, что край прямоугольника нужно переместить вверх и вправо (север/восток) | Играй » |
новое изменение размера | Указывает на двунаправленный курсор изменения размера | Играй » |
нс-изменить размер | Указывает на двунаправленный курсор изменения размера | Играй » |
изменение размера | Курсор указывает, что край прямоугольника нужно переместить вверх и влево (север/запад) | Играй » |
изменение размера nwse | Указывает на двунаправленный курсор изменения размера | Играй » |
бескапельный | Курсор указывает, что перетаскиваемый элемент нельзя перетащить сюда | Играй » |
нет | Курсор не отображается для элемента | Играй » |
не разрешено | Курсор указывает, что запрошенное действие не будет выполнено | Играй » |
указатель | Курсор является указателем и указывает на ссылку | Играй » |
прогресс | Курсор указывает, что программа занята (выполняется) | Играй » |
изменение размера строки | Курсор указывает, что размер строки можно изменить по вертикали | Играй » |
s-изменить размер | Курсор указывает, что край прямоугольника должен быть перемещен вниз (на юг) | Играй » |
изменение размера | Курсор указывает, что край прямоугольника должен быть перемещен вниз и вправо (юг/восток) | Играй » |
SW-изменить размер | Курсор указывает, что край прямоугольника должен быть перемещен вниз и влево (юг/запад) | Играй » |
текст | Курсор указывает на текст, который можно выбрать | Играй » |
URL-адрес | Разделенный запятыми список URL-адресов пользовательских курсоров.![]() | Играй » |
вертикальный текст | Курсор указывает на вертикальный текст, который можно выбрать | Играй » |
w-изменить размер | Курсор указывает, что край прямоугольника должен быть перемещен влево (на запад) | Играй » |
ждать | Курсор указывает, что программа занята | Играй » |
увеличение | Курсор указывает, что что-то можно увеличить | Играй » |
уменьшение | Курсор указывает, что что-то можно уменьшить | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
унаследовать | Наследует это свойство от родительского элемента.![]() |
Связанные страницы
Ссылка HTML DOM: свойство курсора
❮ Предыдущий Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Top2 Reference
9080025 9005
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
81 Top Examples2
81 Top Examples2
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
