W CSS różne typy kursorów są używane do różnych elementów HTML, a aby zmienić typ kursora, „ kursor używana jest właściwość ”. Pozwala zmienić typ kursora i ustawić wartość kursora, który chcesz wyświetlić na ekranie. Jako dodatkowa funkcja pozwala również ustawić własny obraz kursora.

W tym poradniku dowiesz się:

• Co to jest właściwość CSS kursora?
• Jak zmienić kursor na obraz w Hover za pomocą CSS

A więc zacznijmy!

Co to jest „kursorowa” właściwość CSS?

Aby kontrolować wygląd myszy nad elementem HTML, „ kursor Można użyć właściwości CSS. Umożliwia zmianę zwykłego kursora na różne typy, takie jak kursor kopiowania, wskaźnik ręki, chwytanie i wiele innych. Możesz także ustawić własny niestandardowy kursor, ustawiając adres URL obrazu we właściwości kursora.

Składnia

Składnia właściwości kursor jest podana jako:

W powyższej składni przypisz ścieżkę obrazu w „ url() ”, który chcesz wyświetlić na ekranie.

Przejdziemy teraz do przykładu, aby po najechaniu kursorem zmienić zwykły kursor w obrazek.

Jak zmienić kursor na obraz po najechaniu kursorem za pomocą CSS?

Aby zmienić kursor na obraz po najechaniu myszą, najpierw dodaj element w HTML.

Przykład 1: Zmiana kursora na obraz po najechaniu kursorem za pomocą właściwości kursora

Stworzymy nagłówek

i nazwę klasy przycisku „ btn ”.

HTML

< ciało >
< h1 > Zmień kursor na obraz po najechaniu kursorem h1 >
< przycisk klasa = „btn” > Kliknij przycisk >
ciało >

Obecnie najechanie na przycisk pokaże domyślny kursor:

Teraz przejdź do CSS i zmień kursor na obraz.

Następnie ustaw ścieżkę obrazu w „ url() ”. Na przykład określiliśmy „i z.svg ” jako nasz wybrany obraz. Następnie ustaw wartość właściwości kursora jako „ automatyczny ”.

CSS

.btn {
kursor: url ( ikona.svg ) , auto;
wypełnienie: 10px;
}

Zapisz powyższy kod i uruchom plik HTML, aby zobaczyć następujący wynik:

Podane wyjście wskazuje, że kursor został pomyślnie zamieniony w obraz po najechaniu kursorem.

Notatka: “ automatyczny ” jest używana jako alternatywna opcja we właściwości kursora; gdy obraz nie jest ładowany lub brakuje ścieżki do pliku lub samego pliku, na ekranie wyświetlana jest domyślna ikona ze względu na wartość auto.

Przykład 2: Ustawianie domyślnego kursora po najechaniu kursorem

Na przykład podamy adres URL obrazu i ustawimy tylko wartość właściwości kursora jako „ automatyczny ”:

kursor: url ( ) , auto;

W rezultacie kursor nie zmieni się po najechaniu na przycisk:

Przykład 3: Ustawianie alternatywy obrazu na najechaniu

W miejsce auto możesz ustawić różne wartości kursora, który chcesz wyświetlić jako alternatywę dla obrazu. Na przykład zmienimy wartość właściwości kursora z „ automatyczny ' do ' wskaźnik ”:

kursor: url ( ) , wskaźnik;

Jak widać na poniższym wyjściu, kursor zamienia się w wskaźnik dłoni, gdy najedzie się na przycisk:

Udostępniliśmy najłatwiejszą metodę zmiany obrazu kursora po najechaniu kursorem za pomocą CSS.

Wniosek

W CSS możesz zmienić kursor na obraz po najechaniu kursorem za pomocą „ kursor ' własność. Umożliwia zmianę zwykłego kursora na obraz poprzez przypisanie „ adres URL ” obrazu do właściwości kursora. Możesz zastosować dowolny typ kursora, który chcesz wyświetlić, gdy najedzie on na element. W tym artykule zademonstrowano metodę zmiany kursora na wskaźnik w dłoni.