A CSS-ben különféle típusú kurzorokat használnak a különböző HTML-elemekhez, és a kurzor típusának megváltoztatásához a „ kurzor ” ingatlan használatban van. Lehetővé teszi a kurzor típusának megváltoztatását és a képernyőn megjeleníteni kívánt kurzor értékének beállítását. További funkcióként saját kurzorkép beállítását is lehetővé teszi.

Ebből az útmutatóból megtudhatja:

• Mi a kurzor CSS tulajdonsága
• Hogyan lehet a kurzort képre váltani a Hoveren CSS használatával

Szóval, kezdjük!

Mi az a „kurzor” CSS-tulajdonság?

Az egér HTML-elem feletti megjelenésének szabályozásához a „ kurzor ” a CSS tulajdonsága használható. Lehetővé teszi a normál kurzor megváltoztatását különböző típusokra, például másolási kurzorra, kézi mutatóra, megragadásra és még sok másra. Saját egyéni kurzort is beállíthat, ha beállítja a kép URL-jét a kurzor tulajdonságban.

Szintaxis

A kurzor tulajdonság szintaxisa a következő:

A fent megadott szintaxisban rendelje hozzá a kép elérési útját a ' url() ', amelyet meg szeretne jeleníteni a képernyőn.

Most áttérünk a példára, hogy a normál kurzort lebegtető képpé változtassuk.

Hogyan lehet a kurzort képre váltani a lebegtetésen CSS használatával?

Ha a kurzort egy lebegtetett képre szeretné váltani, először adjon hozzá egy elemet a HTML-ben.

1. példa: A kurzor megváltoztatása egy képre a lebegtetésen a kurzor tulajdonsága segítségével

Létrehozunk egy címsort

és a gomb osztálynevet btn ”.

HTML

< test >
< h1 > Módosítsa a kurzort Kép on Hover lehetőségre h1 >
< gomb osztály = 'btn' > Kattints ide gomb >
test >

Ha jelenleg a gombon tartja az egérmutatót, az alapértelmezett kurzor jelenik meg:

Most lépjen a CSS-re, és állítsa a kurzort a képre.

Ezután állítsa be a kép elérési útját a „ url() ”. Például megadtuk az „i with.svg ” mint kiválasztott képünk. Ezután állítsa be a kurzor tulajdonság értékét ' auto ”.

CSS

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

Mentse el a fenti kódot, és futtassa a HTML-fájlt a következő eredmény megtekintéséhez:

Az adott kimenet azt jelzi, hogy a kurzor sikeresen lebegve képpé változott.

Jegyzet: ' auto ” a kurzor tulajdonságban alternatív opcióként használatos; Ha a kép nem töltődik be, vagy a fájl elérési útja vagy maga a fájl hiányzik, az alapértelmezett ikon jelenik meg a képernyőn az automatikus érték miatt.

2. példa: Alapértelmezett kurzor beállítása Hover-re

Például megadjuk a kép url-jét, és csak a kurzor tulajdonság értékét állítjuk be: ' auto ”:

kurzor: url ( ) , auto;

Ennek eredményeként a kurzor nem változik, ha a gomb fölé viszi az egeret:

3. példa: Képalternatíva beállítása lebegtetésre

Az auto helyett a kurzor különböző értékeit állíthatjuk be, amelyeket a kép alternatívájaként szeretnénk megjeleníteni. Például megváltoztatjuk a kurzor tulajdonság értékét a következőről: auto ' nak nek ' mutató ”:

kurzor: url ( ) , mutató;

Amint az alábbi kimeneten látható, a kurzor kézmutatóvá változik, amikor a gomb fölé viszi:

Megtaláltuk a legegyszerűbb módszert a kurzor képének megváltoztatására CSS használatával.

Következtetés

A CSS-ben a kurzort a lebegtetett képre állíthatja a „ kurzor ' ingatlan. Lehetővé teszi a normál kurzor megváltoztatását egy képre a „ url ” a kurzor tulajdonsághoz. Bármilyen típusú kurzort alkalmazhat, amelyet meg szeretne jeleníteni, amikor az egy elemen lebeg. Ez a cikk bemutatta a kurzor kézi mutatóvá alakításának módszerét.