CSS - kursory

Właściwość kursora w CSS umożliwia określenie typu kursora, który powinien być wyświetlany użytkownikowi.

Jednym z dobrych zastosowań tej właściwości jest używanie obrazów do wysyłania przycisków w formularzach. Domyślnie, gdy kursor znajduje się nad łączem, zmienia się ze wskaźnika w dłoń. Nie zmienia to jednak formy przycisku przesyłania w formularzu. Dlatego za każdym razem, gdy ktoś najedzie kursorem na obraz, który jest przyciskiem przesyłania, daje to wizualną wskazówkę, że obraz można kliknąć.

W poniższej tabeli przedstawiono możliwe wartości właściwości kursora -

Sr.No. Wartość i opis
1

auto

Kształt kursora zależy od obszaru kontekstu, nad którym się znajduje. Na przykład I nad tekstem, przekazanie łącza i tak dalej ...

2

crosshair

Krzyżyk lub znak plusa

3

default

Strzała

4

pointer

Wskazująca ręka (w IE 4 ta wartość to ręka)

5

move

Pasek I.

6

e-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w prawo (na wschód)

7

ne-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w górę i w prawo (północ / wschód)

8

nw-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w górę iw lewo (północ / zachód)

9

n-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w górę (na północ)

10

se-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w dół i w prawo (południe / wschód)

11

sw-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w dół i w lewo (południe / zachód)

12

s-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w dół (na południe)

13

w-resize

Kursor wskazuje, że krawędź pola ma zostać przesunięta w lewo (na zachód)

14

text

Pasek I.

15

wait

Klepsydra

16

help

Znak zapytania lub dymek, idealny do użycia nad przyciskami pomocy

17

<url>

Źródło pliku obrazu kursora

NOTE- Powinieneś próbować używać tylko tych wartości, aby dodać przydatne informacje dla użytkowników, aw niektórych miejscach spodziewaliby się zobaczyć ten kursor. Na przykład używanie celownika, gdy ktoś najedzie na link, może zmylić odwiedzających.

Oto przykład -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

To da następujący wynik -