Chúng ta có thể thao tác hình ảnh con trỏ cho các phần tử khác nhau trong tài liệu HTML bằng thuộc tính cursor trong CSS.
Cú pháp
Cú pháp của thuộc tính CSS cursor: Selector { cursor: /*giá trị*/ }
Các giá trị cho thuộc tính CSS cursor:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | alias Chỉ thị một bí danh của thứ gì đó sẽ được tạo |
| 2 | all-scroll Chỉ thị thứ gì đó có thể cuộn theo bất kỳ hướng nào |
| 3 | auto Mặc định, trình duyệt đặt con trỏ |
| 4 | cell Chỉ thị một ô (hoặc tập hợp ô) có thể được chọn |
| 5 | context-menu Chỉ thị menu ngữ cảnh có sẵn |
| 6 | col-resize Chỉ thị cột có thể thay đổi kích thước ngang |
| 7 | copy Chỉ thị thứ gì đó sẽ được sao chép |
| 8 | crosshair Hiển thị dưới dạng ngắm chéo |
| 9 | default Hiển thị con trỏ mặc định |
| 10 | e-resize Chỉ thị cạnh hộp sẽ được di chuyển sang phải (đông) |
| 11 | ew-resize Chỉ thị con trỏ thay đổi kích thước hai chiều |
| 12 | grab Chỉ thị thứ gì đó có thể được nắm |
| 13 | grabbing Chỉ thị thứ gì đó đang được nắm |
| 14 | help Chỉ thị trợ giúp có sẵn |
| 15 | move Chỉ thị thứ gì đó sẽ được di chuyển |
| 16 | n-resize Chỉ thị cạnh hộp sẽ được di chuyển lên (bắc) |
| 17 | ne-resize Chỉ thị cạnh hộp sẽ được di chuyển lên và phải (bắc/đông) |
| 18 | nesw-resize Chỉ thị con trỏ thay đổi kích thước hai chiều |
| 19 | ns-resize Chỉ thị con trỏ thay đổi kích thước hai chiều |
| 20 | nw-resize Chỉ thị cạnh hộp sẽ được di chuyển lên và trái (bắc/tây) |
| 21 | nwse-resize Chỉ thị con trỏ thay đổi kích thước hai chiều |
| 22 | no-drop Chỉ thị mục kéo không thể thả tại đây |
| 23 | none Không hiển thị con trỏ cho phần tử |
| 24 | not-allowed Chỉ thị hành động yêu cầu sẽ không được thực thi |
| 25 | pointer Là con trỏ chỉ thị liên kết |
| 26 | progress Chỉ thị chương trình đang bận (đang tiến hành) |
| 27 | row-resize Chỉ thị hàng có thể thay đổi kích thước dọc |
| 28 | s-resize Chỉ thị cạnh hộp sẽ được di chuyển xuống (nam) |
| 29 | se-resize Chỉ thị cạnh hộp sẽ được di chuyển xuống và phải (nam/đông) |
| 30 | sw-resize Chỉ thị cạnh hộp sẽ được di chuyển xuống và trái (nam/tây) |
| 31 | text Chỉ thị văn bản có thể được chọn |
| 32 | URL Danh sách URL cách nhau bởi dấu phẩy cho con trỏ tùy chỉnh với con trỏ chung ở cuối làm dự phòng |
| 33 | vertical-text Chỉ thị văn bản dọc có thể được chọn |
| 34 | w-resize Chỉ thị cạnh hộp sẽ được di chuyển sang trái (tây) |
| 35 | wait Chỉ thị chương trình đang bận |
| 36 | zoom-in Chỉ thị thứ gì đó có thể phóng to |
| 37 | zoom-out Chỉ thị thứ gì đó có thể thu nhỏ |
| 38 | initial Đặt thuộc tính cursor về giá trị mặc định |
| 39 | inherit Kế thừa thuộc tính cursor từ phần tử cha |
Ví dụ sau triển khai thuộc tính CSS cursor:
Ví dụ
<!DOCTYPE html> <html> <head> <style> div { margin: 5px; float: left; } #one { background-color: beige; } #two { background-color: lavender; } .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nw-resize {cursor: nw-resize;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} </style></head> <body> <div id="one"> <div class="nw-resize">góc trái</div><div class="n-resize">lên</div> <div class="ne-resize">góc phải</div> </div> <div id="two"> <div class="not-allowed">Không cho phép</div><div class="pointer">Con trỏ</div> </div> </body> </html>
Kết quả
