В CSS се използват различни типове курсори за различни HTML елементи и за промяна на типа на курсора, „ курсор ” имотът се ползва. Позволява ви да промените типа на курсора и да зададете стойността на курсора, която искате да се показва на екрана. Като допълнителна функция ви позволява да зададете собствено изображение на курсора.
В това ръководство ще научите:
- Какво е CSS свойство на курсора
- Как да промените курсора на изображение при Hover с помощта на CSS
И така, да започваме!
Какво е CSS свойство „курсор“?
За да контролирате външния вид на мишката върху HTML елемент, „ курсор ” може да се използва свойството на CSS. Позволява промяна на обикновения курсор в различни типове като курсор за копиране, ръчен показалец, грабване и много други. Можете също така да зададете свой персонализиран курсор, като зададете URL адреса на изображението в свойството на курсора.
Синтаксис
Синтаксисът на свойството курсор е даден като:
курсор: url ( ) ;В дадения по-горе синтаксис задайте пътя на изображението в „ url() ”, които искате да покажете на екрана.
Сега ще преминем към примера за промяна на обикновения курсор в изображение при задържане.
Как да промените курсора на изображение при задържане с помощта на CSS?
За да промените курсора на изображение при задържане, първо добавете елемент в HTML.
Пример 1: Промяна на курсора в изображение при задържане на мишката с помощта на свойството на курсора
Ще създадем заглавие
и име на клас бутон “ btn ”.
HTML
< тяло >< h1 > Променете курсора на изображение при задържане h1 >
< бутон клас = 'btn' > Щракнете върху мен бутон >
тяло >
В момента задържането на мишката върху бутона ще покаже курсора по подразбиране:
Сега преминете към CSS и сменете курсора на изображението.
След това задайте пътя на изображението в „ url() ”. Например, уточнихме „i with.svg ” като избрано от нас изображение. След това задайте стойността на свойството на курсора като „ Автоматичен ”.
CSS
.btn {курсор: url ( icon.svg ) , Автоматичен;
подложка: 10px;
}
Запазете горния код и изпълнете HTML файла, за да видите следния резултат:
Даденият изход показва, че курсорът е успешно променен в изображение при задържане.
Забележка: “ Автоматичен ” се използва като алтернативна опция в свойството на курсора; когато изображението не се зареди или пътят до файла или самият файл липсват, на екрана се показва иконата по подразбиране поради автоматичната стойност.
Пример 2: Задаване на курсора по подразбиране при задържане
Например, ще дадем URL адреса на изображението и ще зададем само стойността на свойството на курсора като „ Автоматичен ”:
курсор: url ( ) , Автоматичен;В резултат на това курсорът няма да се промени, когато задържите курсора на мишката върху бутона:
Пример 3: Задаване на алтернативно изображение при задържане
На мястото на auto можете да зададете различни стойности на курсора, който искате да се показва като алтернатива на изображението. Например, ще променим стойността на свойството на курсора от „ Автоматичен ' да се ' показалец ”:
курсор: url ( ) , показалец;Както можете да видите в изхода по-долу, курсорът се променя в показалец на ръка, когато задържи над бутона:
Предоставихме най-лесния метод за промяна на изображението на курсора при задържане с помощта на CSS.
Заключение
В CSS можете да промените курсора на изображението при задържане, като използвате „ курсор ' Имот. Позволява промяна на обикновен курсор към изображение чрез присвояване на „ URL адрес ” на изображението към свойството на курсора. Можете да приложите всякакъв тип курсор, който искате да се показва, когато е задържал мишката върху елемент. Тази статия демонстрира метода за промяна на курсора в ръчен показалец.