CSS - Con trỏ
Các con trỏ tài sản của CSS cho phép bạn chỉ định kiểu của con trỏ mà sẽ được hiển thị cho người dùng.
Một cách sử dụng tốt của thuộc tính này là sử dụng hình ảnh cho các nút gửi trên biểu mẫu. Theo mặc định, khi con trỏ di chuột qua một liên kết, con trỏ sẽ chuyển từ con trỏ sang bàn tay. Tuy nhiên, nó không thay đổi hình thức đối với nút gửi trên biểu mẫu. Do đó, bất cứ khi nào ai đó di chuột qua một hình ảnh là nút gửi, nó sẽ cung cấp manh mối trực quan rằng hình ảnh đó có thể nhấp được.
Bảng sau đây cho thấy các giá trị có thể có cho thuộc tính con trỏ:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | auto Hình dạng của con trỏ phụ thuộc vào khu vực ngữ cảnh mà nó kết thúc. Ví dụ: tôi chuyển qua văn bản, chuyển giao một liên kết, v.v. |
| 2 | crosshair Hình chữ thập hoặc dấu cộng |
| 3 | default Một mũi tên |
| 4 | pointer Một bàn tay (trong IE 4 giá trị này là bàn tay) |
| 5 | move Thanh tôi |
| 6 | e-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang phải (phía đông) |
| 7 | ne-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên và sang phải (bắc / đông) |
| số 8 | nw-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên và sang trái (bắc / tây) |
| 9 | n-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên (hướng bắc) |
| 10 | se-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống và sang phải (nam / đông) |
| 11 | sw-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống và sang trái (nam / tây) |
| 12 | s-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống (phía nam) |
| 13 | w-resize Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang trái (phía tây) |
| 14 | text Thanh tôi |
| 15 | wait Một giờ ly |
| 16 | help Dấu chấm hỏi hoặc bong bóng, lý tưởng để sử dụng trên các nút trợ giúp |
| 17 | <url> Nguồn của tệp hình ảnh con trỏ |
NOTE- Bạn nên cố gắng chỉ sử dụng những giá trị này để thêm thông tin hữu ích cho người dùng và ở những nơi, họ sẽ mong đợi nhìn thấy con trỏ đó. Ví dụ: sử dụng dấu gạch chéo khi ai đó di chuột qua liên kết có thể khiến khách truy cập nhầm lẫn.
Đây là một ví dụ -
<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>Nó sẽ tạo ra kết quả sau: