Kursor wskazuje pozycję na ekranie, w którym użytkownik może kliknąć lub wprowadzić tekst. Mogą istnieć różne kursory dla różnych komponentów strony internetowej. Deweloper musi upewnić się, że kursory stosowane w aplikacji muszą być atrakcyjne. Na przykład, na przycisku na naczyniu myszy można użyć kursora ręki. Wskaźnik tekstu (linia migającego) jest wykorzystywany na polu tekstowym, w którym tekst ma zostać wprowadzony.
Istnieje kilka stylów kursorów w CSS wykorzystywanych tylko przez określenie wartości właściwości kursora. Jednak programista może utworzyć dostosowany kursor za pomocą CSS.
Ten przewodnik po studiach zapewni:
Kursor CSS
Niestandardowy kursor CSS
Przed wpadnięciem w ten temat zobaczmy niektóre z kursorów CSS z praktycznym przykładem.
Kursor CSS
CSS „kursor„Własność ma różne wartości, takie jak wskaźnik, brak, postęp i więcej. Utwórzmy tabelę zawierającą rzędy, na których wyświetlą się różne kursory na podatkowaniu myszy.
Przykład: Tworzenie tabeli reprezentującej różne kursory CSS w HTML
Najpierw dodaj
element w Html. Wewnątrz tego elementu:
tag zostanie wykorzystany do robienia wierszy.
Pierwszy rząd zawiera nagłówki.
Te nagłówki są określone przez wykorzystanie
tagi. Inny
Tagi zawierają dwa
znaczniki do wypełnienia kolumn danymi.
Drugi
Tag reprezentuje elementy przycisków, które są stosowane za pomocą CSS ”kursor”Własność o różnych wartościach.
Kod HTML dla powyższego scenariusza podano poniżej:
Selektor kursorów CSS
Styl kursora
Kursor: wskaźnik
Kursor: postęp
Kursor: Nie jest to uwzględnione
Kursor: Brak
Kursor: Porusz
Kursor: chwyć
Kursor: kopia
Kursor: Kolo-rozmiar
Kursor: Resize
Kursor: tekst
Powyższy kod wygeneruje następujący wynik:
W następnej sekcji zastosujemy różne style do elementów HTML.
Wszystkie elementy HTML są stosowane ze stylami CSS, które wyjaśniono poniżej:
"wyściółka„Nieruchomość z„0„Wartość nie obejmuje miejsca wokół treści elementu.
"margines„Nieruchomość z„0„Wartość nie dodaje miejsca poza każdym z elementów.
"rodzina czcionek„Własność ma wartość”Arial, Helvetica, sans-serif". Lista stylów czcionek jest podawana w celu zapewnienia, czy pierwszy styl nie jest obsługiwany przez przeglądarkę, należy zastosować inne style.
Element tabeli HTML jest stosowany z właściwościami CSS, które opisano poniżej:
"granica„Właściwość jest ustawiona o wartości”1px Solid Gainsboro”, Który reprezentuje odpowiednio szerokość obramowania, styl graniczny i kolor graniczny.
"margines”Własność zachowuje się jak określono powyżej.
Style „TD” element
td Text-Align: Center;
Element jest stosowany z właściwością „tekst-align”Z wartością„Centrum". Wyrównuje tekst kolumny w środku.
Do tej pory omówiliśmy kursory dostarczane przez CSS. W nadchodzącej sekcji przykład opisuje, jak utworzyć niestandardowy kursor z CSS.
Niestandardowy kursor CSS
Deweloperzy muszą używać odpowiednich kursorów do swoich aplikacji. Kursory powinny być atrakcyjne, aby zwrócić uwagę użytkowników. Ponadto w tym celu można utworzyć niestandardowy kursor.
Spójrz na poniższy przykład!
Przykład: Jak utworzyć niestandardowy kursor z CSS?
W HTML dodaj dwa elementy div. Jeden z klasą „koło”, A drugi z klasą„punkt".
Html
Idźmy naprzód w kierunku sekcji CSS.
Element „Body” stylu
ciało Wysokość: 100 VH;
Element ciała pliku HTML jest stosowany w stylu „wysokość„Właściwość do ustawiania wysokości elementu.
Element DIV z punktem klasowym jest wyposażony w różne właściwości, które opisano poniżej:
"kolor tła„Właściwość określa kolor tła elementu.
"Radiusz graniczny”Ustawia krawędzie elementu.
Inne nieruchomości będą działać tak samo, jak omówiono.
Dany kod wyświetli następujący kursor na stronie internetowej:
Stworzyliśmy kursor za pomocą HTML i CSS. Teraz, w następnej sekcji, kod JavaScript jest zapisywany w celu dodania wymaganej funkcjonalności do kursora.
JavaScript
Opis powyższego kodu JavaScript podano poniżej:
"”Tag jest sparowany z znacznikiem, który służy do pisania kodu JavaScript.
"const”Słowo kluczowe określa, że słowo kluczowe Const, a następnie zmienna nie można ponownie przypisać.
"dokument.querySelector ('.koło')”Zwraca element Circle Div, który pasuje do określonego selektora w dokumencie.
"dokument.querySelector ('.punkt')”Zwraca element DIV Point, który pasuje do określonego selektora w dokumencie.
"const movecursor = (e) =>”Ta funkcja określa funkcję kursora.
"mi.klient”Zwraca współrzędną pionową, gdy zdarzenie myszy zostało uruchomione.
"mi.Clientx„Zwraca współrzędną poziomą, gdy zdarzenie myszy jest uruchamiane.
"Kursorcircle.styl.przekształcać„Div Circle jest stosowany z transformacją stylu.
"Cursorpint.styl.przekształcać„Point Div jest stosowany z transformacją stylu.
"tłumacz ($ MOUSEX PX, $ MOUSEY PX)„Wartość właściwości transformacji ustawia współrzędne poziome i pionowe.
"okno.addEventListener („Mysz”, Movecursor)„Metoda słuchacza zdarzeń wysłuchuje ruchu myszy. Jest częścią globalnego obiektu okna.
Po dostarczeniu powyższych bloków kodu kursor automatycznie porusza się na ekranie, jak pokazano poniżej:
To super! Stworzyliśmy niestandardowy kursor z różnymi właściwościami CSS.
Wniosek
CSS „kursor„Własność ma wiele wartości wskazujących różne style kursorów. Jednak wykorzystując elementy HTML i właściwości CSS, możemy tworzyć spersonalizowane kursory. Następnie kod JavaScript jest zaimplementowany w celu aktywowania jego funkcjonalności. To badanie wykazało, jak tworzyć niestandardowe kursory CSS z praktycznym przykładem.
