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 -