Какво е курсори в CSS?

Всеки ден вече използваме персонализирани курсори. Това взаимодействие е възможно чрез използване на модифицирани курсори, като например когато задържите курсора върху бутони, курсорът на показалеца се трансформира в ръка или когато задържите курсора върху текста и курсорът се трансформира в текстов курсор.

Курсорите обаче могат да се използват и за предоставяне на различни допълнителни творчески възможности на нашите потребители.

Трябва да сме наясно, че CSS вече има курсори по подразбиране за различни често извършвани действия, преди да започнем да разработваме нашите персонализирани курсори.

Тези курсори предоставят опции за действие на точното място, над което задържате курсора на мишката. Примерите включват курсори, които показват, че трябва да щракнете върху връзки, плъзгане и пускане на елементи, увеличаване и намаляване на обекти и др.

Използвайте свойството CSS cursor, за да опишете вида на курсора, който искате.

CSS свойство на курсора

Можем да посочим вида на курсора, който трябва да бъде показан на потребителя, като използваме свойството CSS курсор.

Използването на снимки като бутони за изпращане във формуляри е полезно приложение на тази възможност. По подразбиране се появява ръка вместо показалец, когато курсорът е над връзка. Бутонът за изпращане на формуляр обаче не го кара да променя формуляра. Това служи като визуална подсказка, че върху картината може да се кликне по всяко време, когато някой задържи курсора на мишката върху изображение, което е бутон за изпращане.

Това свойство се определя от нула или повече стойности, разделени със запетаи, последвани от една стойност на ключовата дума, както се изисква, и всяка ще се отнася до файла с изображение.

Синтаксис

 cursor: value; 

Стойности на имотите

Автоматичен:Настройката по подразбиране за този атрибут е да постави курсора.псевдоним:Този атрибут се използва за показване на индикатора, свързан със създаването на курсора.Цялостно превъртане:Курсорът в този атрибут означава превъртане.клетка:Курсорът в това свойство показва, че в момента е избрана клетка или група от клетки.Контекстно меню:Курсорът в този атрибут показва наличието на контекстно меню.Преоразмеряване на колона:Когато курсорът е над колона в това свойство, той може да бъде преоразмерен хоризонтално.Копие:Курсорът в това свойство показва, че нещо трябва да се копира.Мерник:Курсорът се появява като кръст в този атрибут.По подразбиране:Курсорът по подразбиране.Е-преоразмеряване:Курсорът в този атрибут показва, че десният ръб на полето трябва да бъде преместен.Преоразмеряване:Курсорът в този атрибут представлява двупосочен курсор за преоразмеряване.Помогне:В това свойство курсорът показва, че помощта е достъпна.Ход:Указателят в това свойство предполага, че нещо трябва да бъде преместено. n-оразмеряване:Когато използвате свойството n-resize, показалецът показва, че горната граница на полето трябва да бъде изместена.Какво преоразмеряване:С това свойство курсорът показва, че ръбът на кутията трябва да бъде изместен надясно и нагоре.Ново преоразмеряване:Двупосочният курсор за преоразмеряване се обозначава с този атрибут.Ns-преоразмеряване:Двупосочен курсор за преоразмеряване се обозначава с атрибута ns-resize.Nw-преоразмеряване:Курсорът в този атрибут показва, че горният и долният ръб на кутията трябва да се преместят нагоре и наляво.Преоразмеряване на носа:Двупосочният курсор за преоразмеряване се обозначава с този атрибут.Без изпускане:Курсорът в този атрибут показва, че изтегленият обект не може да бъде изхвърлен на това място.Нито един:За елемента според този атрибут не се показва курсор.Не е позволено:Курсорът в това свойство показва, че исканото действие няма да бъде извършено.показалец:Курсорът в това свойство служи като указател и показва напредъка на връзката.Напредък:Курсорът в този атрибут показва, че програмата е активна.Преоразмеряване на ред:Курсорът показва, че тази функция позволява преоразмеряване на вертикален ред.S-преоразмеряване:Когато използвате това свойство, показалецът показва, че долната граница на кутията трябва да бъде понижена.Преоразмеряване:Курсорът в този атрибут показва, че ръбът на кутията трябва да бъде изместен надясно и надолу.Sw-преоразмеряване:Курсорът в този атрибут показва, че левият и долният ръб на полето трябва да бъдат преместени.Текст:Курсорът в този атрибут обозначава текст, който може да бъде избран.URL:Това свойство съдържа списък с персонализирани URL адреси на курсора, разделени със запетаи, и общ курсор в края на списъка.Вертикален текст:Курсорът в този атрибут показва възможни селекции на вертикален текст.W-преоразмеряване:Когато използвате това свойство, показалецът показва, че левият ръб на кутията трябва да бъде преместен.

Пример

Този пример показва как да използвате свойството cursor. Програмата е заета, тъй като стойността на свойството на курсора е настроена да чака.

 CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> 

Изход

Можем да посочим вида на курсора, който трябва да бъде показан на потребителя, като използваме свойството CSS курсор. Използването на снимки като бутони за изпращане във формуляри е полезно приложение на тази възможност. По подразбиране се появява ръка вместо показалец, когато курсорът е над връзка.