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

Курсор — CSS | MDN

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

/* Применение ключевых значений */
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;
}

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Опубликовано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:

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

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

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

    

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

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

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

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

 [role=button]{cursor:pointer}
 

 hi
 

 style="cursor: pointer;"
 

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

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

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

 
 Конечно, вы должны поместить стиль в свой файл CSS и применить его к классу.
 Использование 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 будет выглядеть следующим образом:
 

  

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

 

 

 

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

 

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

 

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

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

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

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

 

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

 

  <голова>
    
    <стиль>
      тело {
        фон: #еее;
        выравнивание текста: по центру;
      }
      кнопка {
        отображение: встроенный блок;
        цвет фона: #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"), авто;
      }
    
  
  <тело>
    
    
    
    
  
 

  <голова> <стиль> тело {
 выравнивание текста: по центру;
 семейство шрифтов: 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;
 курсор: захватить;
 }
 .
No related posts.