W CSS różne rodzaje kursorów są używane do różnych elementów HTML i do zmiany rodzaju kursora, „kursor„Własność jest używana. Pozwala na zmianę typu kursora i ustawienie wartości kursora, który chcesz wyświetlić na ekranie. Jako dodatkowa funkcja pozwala także ustawić własny obraz kursora.

W tym przewodniku nauczysz się:

• Co to jest właściwość Cursor CSS
• Jak zmienić kursor na obraz na zawisie za pomocą CSS

A więc zacznijmy!

Czym jest właściwość CSS „Kursor”?

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, chwyt i wiele innych. Możesz także ustawić własny niestandardowy kursor, ustawiając adres URL obrazu w właściwości kursora.

Składnia

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

kursor: url ();

W powyższej składni przypisz ścieżkę obrazu w „URL ()„Że chcesz wyświetlić na ekranie.

Przejdziemy teraz do przykładu, aby zmienić regularny kursor w obraz na zawisie.

Jak zmienić kursor na obraz na zawisie za pomocą CSS?

Aby zmienić kursor na obraz na zawisie, najpierw dodaj element w HTML.

Przykład 1: Zmiana kursora na obraz na zawisie za pomocą właściwości kursor

Stworzymy nagłówek

i nazwa klasy przycisków „Btn".

Html

Zmień kursor na obraz na zawisie

Kliknij

Obecnie unoszenie się na przycisku 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 „jakon.svg”Jako nasz wybrany obraz. Następnie ustaw wartość właściwości kursora jako „automatyczny".

CSS

.btn
Kursor: URL (ikona.svg), auto;
Wyściółka: 10px;

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

Dane dane wyjściowe wskazuje, że kursor jest skutecznie zmieniany w obraz na zawisie.

Notatka: "automatyczny”Jest używany jako opcja alternatywna w właściwości kursora; Gdy obraz nie ładuje się lub brakuje samej ścieżki lub pliku, domyślna ikona jest wyświetlana na ekranie z powodu automatycznej wartości.

Przykład 2: Ustawienie domyślnego kursora na zawisie

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 unoszeniu się nad przyciskiem:

Przykład 3: Ustawienie obrazu alternatywy na zawisie

W miejscu automatycznego 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 zmienia się w wskaźnik ręki, gdy unosi się nad przyciskiem:

Zapewniliśmy najłatwiejszą metodę zmiany obrazu kursora na zawisie za pomocą CSS.

Wniosek

W CSS możesz zmienić kursor na obraz na zawisie za pomocą „kursor" nieruchomość. Umożliwia zmianę regularnego kursora na obraz, przypisując „URL”Obrazu do właściwości kursora. Możesz zastosować dowolny rodzaj kursora, który chcesz wyświetlić, gdy unosi się on na elemencie. W tym artykule pokazano metodę zmiany kursora na wskaźnik ręki.