У ЦСС-у, различити типови курсора се користе за различите ХТМЛ елементе, а да би се променио тип курсора, „ курсор ” се користи својство. Омогућава вам да промените тип курсора и подесите вредност курсора коју желите да прикажете на екрану. Као додатна функција, такође вам омогућава да поставите сопствену слику курсора.
У овом водичу ћете научити:
- Шта је ЦСС својство курсора
- Како да промените курсор у слику на лебдећи помоћу ЦСС-а
Дакле, почнимо!
Шта је ЦСС својство „курсор“?
Да бисте контролисали изглед миша преко ХТМЛ елемента, „ курсор ” својство ЦСС-а може се користити. Омогућава промену обичног курсора у различите типове као што су курсор за копирање, показивач руком, граб и још много тога. Такође можете поставити сопствени прилагођени курсор тако што ћете поставити УРЛ слике у својству курсора.
Синтакса
Синтакса својства курсора је дата као:
курсор: урл ( ) ;У горе датој синтакси, доделите путању слике у „ урл() ” који желите да прикажете на екрану.
Сада ћемо прећи на пример да променимо обичан курсор у слику при лебдењу.
Како променити курсор у слику при лебдењу помоћу ЦСС-а?
Да бисте променили курсор у слику при лебдењу, прво додајте елемент у ХТМЛ.
Пример 1: Промена курсора у слику при лебдењу помоћу својства курсора
Направићемо наслов <х1> и име класе дугмета “ бтн ”.
ХТМЛ
< тело >< х1 > Промените курсор на слику када лебдите х1 >
< дугме класа = 'бтн' > Кликни ме дугме >
тело >
Тренутно, задржавање миша на дугмету ће приказати подразумевани курсор:
Сада пређите на ЦСС и промените курсор на слику.
Затим поставите путању слике у „ урл() ”. На пример, навели смо „и витх.свг ” као наша одабрана слика. Затим поставите вредност својства курсора као „ ауто ”.
ЦСС
.бтн {курсор: урл ( ицон.свг ) , ауто;
паддинг: 10пк;
}
Сачувајте горњи код и покрените ХТМЛ датотеку да бисте видели следећи резултат:
Дати излаз показује да је курсор успешно промењен у слику при лебдењу.
Белешка: “ ауто ” се користи као алтернативна опција у својству курсора; када се слика не учита, или недостаје путања датотеке или сама датотека, подразумевана икона се приказује на екрану због аутоматске вредности.
Пример 2: Подешавање подразумеваног курсора при лебдењу
На пример, даћемо УРЛ слике и само поставити вредност својства курсора као „ ауто ”:
курсор: урл ( ) , ауто;Као резултат тога, курсор се неће променити када пређете преко дугмета:
Пример 3: Постављање алтернативне слике при лебдењу
Уместо ауто, можете поставити различите вредности курсора који желите да прикажете као алтернативу слици. На пример, променићемо вредност својства курсора из „ ауто ' до ' показивач ”:
курсор: урл ( ) , показивач;Као што можете видети у доњем излазу, курсор се мења у показивач руке када лебди изнад дугмета:
Обезбедили смо најлакши метод за промену слике курсора при лебдењу помоћу ЦСС-а.
Закључак
У ЦСС-у можете да промените курсор на слику када лебдите помоћу „ курсор ' имовина. Омогућава промену обичног курсора на слику додељивањем „ урл ” слике на својство курсора. Можете да примените било који тип курсора који желите да прикажете када је лебдео изнад елемента. Овај чланак је демонстрирао метод промене курсора у показивач руком.