Jak zmienić kursor na wskaźnik ręki w CSS

Istnieje wiele rodzajów kursorów, które są używane na różnych ekranach. Możesz zmienić rodzaj kursora za pomocą właściwości CSS Cursor, która określa, jaki typ kursora wyświetli się dla użytkownika, na przykład wskaźnik ręczny, gabin, kopia itp. Możemy zmodyfikować regularny kursor do wskaźnika ręcznego, podając wartość „wskaźnika” właściwości kursora.

W tym artykule dowiemy się:

• "kursor" nieruchomość
• Składnia właściwości kursora
• Jak zmienić kursor na wskaźnik ręki w CSS?

Zacznijmy!

„Kursor” właściwość CSS

CSS „kursor”Właściwości kontrolują wygląd wskaźnika myszy, gdy jest on nad elementem. Właściwość kursora w CSS pozwala nam zmienić regularny kursor na kursor ręczny, kursor kopiowania, kursor komórki, kursor hrabstwa itp. Każdy kształt kursora służy do różnych celów. Na przykład kursor kopii wskazuje kopiowanie tekstu, a punkt ręki wskazuje kliknięcie linków lub menu. Teraz przechodzimy do składni właściwości kursora.

Składnia właściwości kursora

Składnia właściwości kursora to:

Kursor: wartość;

W miejscu 'wartość', możemy przypisać wartość kursora, którą chcemy wyświetlić na ekranie. Na przykład wskaźnik, kopiuj, chwyt i wiele innych.

Po zrozumieniu składni kursora przejdziemy do przykładu, w którym modyfikujemy regularny kursor w wskaźnik ręki.

Jak zmienić kursor na wskaźnik ręki w CSS?

Rozważmy praktyczny przykład ilustrujący działanie właściwości kursora.

Przykład

W tym przykładzie utworzymy listę w pliku HTML, który zawiera trzy elementy:

• Html


• CSS


• JavaScript

Obecnie nasz kursor wygląda tak:

Następnie przejdziemy do pliku CSS i ustawimy wartość kursora na „wskaźnik„Aby zmienić typ kursora na wskaźnik ręki. Ponadto ustalimy margines listy jako „25px”I margines lewic500px„Dzieje się tak, ponieważ stworzy przestrzeń między elementami listy, a także z lewej strony listy:

li
Kursor: wskaźnik;
Margines: 25px;
Margin-left: 500px;

Ustawiliśmy wartość kursora na „wskaźnik„, Który zmieni się na wskaźnik ręki, gdy użytkownik unosi się nad elementem listy.

Po wdrożeniu kodu CSS przejdź do HTML i zobacz wynik:

Tutaj widzimy, że za każdym razem, gdy kursor przechodzi do elementu listy, zmienia się w wskaźniku ręki. To z powodu „kursor" nieruchomość

Wniosek

Właściwość kursora w CSS umożliwia zmianę regularnego kursora na wskaźnik ręki. Aby zmodyfikować regularny kursor do wskaźnika ręcznego, musisz przypisać „wskaźnik„Wartość właściwości kursora. Możesz zastosować dowolny rodzaj kursora, który chcesz wyświetlić na ekranie. Ten artykuł pokazuje metodę zmiany kursora na wskaźnik ręki.