Co to są kursory w CSS?

Na co dzień używamy już niestandardowych kursorów. Ta interakcja jest możliwa dzięki zastosowaniu zmodyfikowanych kursorów, na przykład po najechaniu kursorem na przyciski kursor wskaźnika zmienia się w dłoń lub po najechaniu kursorem na tekst i kursor zmienia się w kursor tekstowy.

są modelowymi przykładami

Kursory mogą być jednak również wykorzystywane w celu zapewnienia naszym użytkownikom różnych dodatkowych możliwości twórczych.

Powinniśmy mieć świadomość, że CSS ma już domyślne kursory dla różnych często wykonywanych czynności, zanim zaczniemy tworzyć własne kursory.

Kursory te udostępniają opcje działania dokładnie w miejscu, nad którym się znajdujesz. Przykładami są kursory wskazujące, że należy klikać łącza, przeciągać i upuszczać elementy, powiększać i pomniejszać obiekty i nie tylko.

Użyj właściwości kursora CSS, aby opisać rodzaj kursora, jaki chcesz.

Właściwość kursora CSS

Za pomocą właściwości CSS kursor możemy określić, jaki rodzaj kursora ma być pokazywany użytkownikowi.

Użytecznym zastosowaniem tej funkcji jest używanie zdjęć jako przycisków przesyłania w formularzach. Domyślnie zamiast wskaźnika pojawia się dłoń, gdy kursor znajduje się nad łączem. Jednak przycisk przesyłania formularza nie powoduje jego zmiany. Służy to jako wizualna wskazówka, że ​​zdjęcie można kliknąć za każdym razem, gdy ktoś najedzie kursorem na obraz będący przyciskiem przesyłania.

Ta właściwość jest określona przez zero lub więcej wartości oddzielonych przecinkami, po których następuje jedna wartość słowa kluczowego, jeśli jest to wymagane, a każda z nich będzie odnosić się do pliku obrazu.

Składnia

 cursor: value; 

Wartości nieruchomości

Automatyczny:Domyślnym ustawieniem tego atrybutu jest umieszczenie kursora.Alias:Ten atrybut służy do pokazywania wskaźnika związanego z tworzeniem kursora.Przewiń wszystko:Kursor w tym atrybucie oznacza przewijanie.Komórka:Kursor w tej właściwości wskazuje, że aktualnie wybrana jest komórka lub grupa komórek.Menu kontekstowe:Kursor w tym atrybucie pokazuje obecność menu kontekstowego.Zmiana rozmiaru koloru:Gdy kursor znajduje się nad kolumną w tej właściwości, można zmienić jej rozmiar w poziomie.Kopiuj:Kursor w tej właściwości wskazuje, że coś należy skopiować.Celownik:W tym atrybucie kursor pojawia się jako krzyżyk.Domyślny:Domyślny kursor.E-zmiana rozmiaru:Kursor w tym atrybucie wskazuje, że należy przesunąć prawą krawędź pudełka.Zmiana rozmiaru:Kursor w tym atrybucie reprezentuje dwukierunkowy kursor zmiany rozmiaru.Pomoc:W tej właściwości kursor pokazuje, że pomoc jest dostępna.Przenosić:Wskaźnik w tej właściwości oznacza, że ​​coś musi zostać przesunięte. n-zmiana rozmiaru:Podczas korzystania z właściwości n-resize wskaźnik pokazuje, że górna granica ramki powinna zostać przesunięta.Jaka zmiana rozmiaru:Dzięki tej właściwości kursor pokazuje, że krawędź ramki powinna zostać przesunięta w prawo i do góry.Nowa zmiana rozmiaru:Ten atrybut wskazuje dwukierunkowy kursor zmiany rozmiaru.Zmiana rozmiaru Ns:Dwukierunkowy kursor zmiany rozmiaru jest wskazywany przez atrybut ns-resize.Nw-zmiana rozmiaru:Kursor w tym atrybucie pokazuje, że górną i dolną krawędź pudełka należy przesuwać w górę i w lewo.Zmiana rozmiaru nosa:Ten atrybut wskazuje dwukierunkowy kursor zmiany rozmiaru.Bez kropli:Kursor w tym atrybucie wskazuje, że wyciągniętego obiektu nie można zrzucić w tej lokalizacji.Nic:Dla elementu zgodnego z tym atrybutem nie jest wyświetlany kursor.Niedozwolony:Kursor w tej właściwości wskazuje, że żądana akcja nie zostanie wykonana.Wskaźnik:Kursor w tej właściwości służy jako wskaźnik i wyświetla postęp łącza.Postęp:Kursor w tym atrybucie pokazuje, że program jest aktywny.Zmiana rozmiaru wiersza:Kursor pokazuje, że ta funkcja umożliwia zmianę rozmiaru wierszy w pionie.Zmiana rozmiaru S:Podczas korzystania z tej właściwości wskaźnik pokazuje, że dolna granica pudełka powinna zostać obniżona.Zmiana rozmiaru:Kursor w tym atrybucie wskazuje, że krawędź ramki powinna zostać przesunięta w prawo i w dół.Zmiana rozmiaru oprogramowania:Kursor w tym atrybucie wskazuje, że należy przesunąć lewą i dolną krawędź ramki.Tekst:Kursor w tym atrybucie oznacza tekst, który można wybrać.Adres URL:Ta właściwość zawiera listę niestandardowych adresów URL kursorów oddzielonych przecinkami i ogólny kursor na końcu listy.Tekst pionowy:Kursor w tym atrybucie pokazuje możliwe zaznaczenia tekstu pionowego.Zmiana rozmiaru W:Podczas korzystania z tej właściwości wskaźnik pokazuje, że należy przesunąć lewą krawędź ramki.

Przykład

Ten przykład pokazuje, jak wykorzystać właściwość kursora. Program jest zajęty, ponieważ wartość właściwości kursora jest ustawiona na oczekiwanie.

 CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> 

Wyjście

Za pomocą właściwości CSS kursor możemy określić, jaki rodzaj kursora ma być pokazywany użytkownikowi. Użytecznym zastosowaniem tej funkcji jest używanie zdjęć jako przycisków przesyłania w formularzach. Domyślnie zamiast wskaźnika pojawia się dłoń, gdy kursor znajduje się nad łączem.