Sa CSS, ginagamit ang iba't ibang uri ng cursor para sa iba't ibang elemento ng HTML, at para baguhin ang uri ng cursor, ang ' cursor ” gamit ang ari-arian. Pinapayagan ka nitong baguhin ang uri ng cursor at itakda ang halaga ng cursor na gusto mong ipakita sa screen. Bilang karagdagang feature, hinahayaan ka nitong itakda ang iyong sariling cursor image.

Sa gabay na ito, matututunan mo ang:

• Ano ang pag-aari ng cursor CSS
• Paano baguhin ang cursor sa imahe sa Hover gamit ang CSS

Kaya, magsimula tayo!

Ano ang 'cursor' CSS Property?

Upang kontrolin ang hitsura ng mouse sa isang HTML na elemento, ang ' cursor ” ang pag-aari ng CSS ay maaaring gamitin. Pinapayagan nitong baguhin ang regular na cursor sa iba't ibang uri tulad ng copy cursor, hand pointer, grab, at marami pa. Maaari mo ring itakda ang iyong sariling custom na cursor sa pamamagitan ng pagtatakda ng url ng larawan sa property ng cursor.

Syntax

Ang syntax ng cursor property ay ibinibigay bilang:

Sa ibinigay na syntax sa itaas, italaga ang landas ng imahe sa ' url() ” na gusto mong ipakita sa screen.

Lilipat na tayo ngayon sa halimbawa upang baguhin ang regular na cursor sa isang imahe na naka-hover.

Paano Baguhin ang Cursor sa Imahe sa Hover Gamit ang CSS?

Upang baguhin ang cursor sa isang imahe sa hover, magdagdag muna ng isang elemento sa HTML.

Halimbawa 1: Pagpapalit ng Cursor sa isang Larawan sa Hover gamit ang Cursor Property

Gagawa kami ng heading

at pangalan ng klase ng button ' btn ”.

HTML

< katawan >
< h1 > Baguhin ang Cursor sa Imahe sa Hover h1 >
< pindutan klase = 'btn' > Pindutin mo ako pindutan >
katawan >

Sa kasalukuyan, ang pag-hover sa button ay magpapakita ng default na cursor:

Ngayon lumipat sa CSS at baguhin ang cursor sa imahe.

Pagkatapos, itakda ang landas ng larawan sa “ url() ”. Halimbawa, tinukoy namin ang 'i with.svg ” bilang aming napiling larawan. Pagkatapos, itakda ang halaga ng pag-aari ng cursor bilang ' sasakyan ”.

CSS

.btn {
cursor: url ( icon.svg ) , auto;
padding: 10px;
}

I-save ang code sa itaas at i-execute ang HTML file upang makita ang sumusunod na resulta:

Ang ibinigay na output ay nagpapahiwatig na ang cursor ay matagumpay na nabago sa isang imahe sa hover.

Tandaan: “ sasakyan ' ay ginagamit bilang alternatibong opsyon sa cursor property; kapag ang imahe ay hindi naglo-load, o ang file path o file mismo ay nawawala, ang default na icon ay ipinapakita sa screen dahil sa auto value.

Halimbawa 2: Pagtatakda ng Default na Cursor sa Hover

Halimbawa, ibibigay namin ang url ng larawan at itatakda lamang ang halaga ng property ng cursor bilang ' sasakyan ”:

cursor: url ( ) , auto;

Bilang resulta, hindi magbabago ang cursor kapag na-hover sa button:

Halimbawa 3: Pagtatakda ng Alternatibong Larawan sa Hover

Sa lugar ng auto, maaari kang magtakda ng iba't ibang mga halaga ng cursor na gusto mong ipakita bilang isang kahalili sa larawan. Halimbawa, babaguhin namin ang halaga ng property ng cursor mula sa “ sasakyan 'sa' panturo ”:

cursor: url ( ) , pointer;

Tulad ng makikita mo sa output sa ibaba, ang cursor ay nababago sa isang hand pointer kapag nag-hover ito sa ibabaw ng button:

Nagbigay kami ng pinakamadaling paraan para sa pagbabago ng cursor image sa hover gamit ang CSS.

Konklusyon

Sa CSS, maaari mong baguhin ang cursor sa larawan sa hover gamit ang “ cursor ” ari-arian. Pinapayagan nitong baguhin ang isang regular na cursor sa isang imahe sa pamamagitan ng pagtatalaga ng ' url ” ng larawan sa property ng cursor. Maaari mong ilapat ang anumang uri ng cursor na gusto mong ipakita kapag nag-hover ito sa isang elemento. Ipinakita ng artikulong ito ang paraan ng pagpapalit ng cursor sa isang hand pointer.