Chúng tôi 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 cách sử dụng thuộc tính con trỏ CSS.
Cú pháp
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
} Sau đây là các giá trị cho thuộc tính con trỏ CSS -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | bí danh Nó chỉ ra một bí danh của một thứ gì đó sẽ được tạo ra |
| 2 | cuộn tất cả Nó chỉ ra rằng một cái gì đó có thể được cuộn theo bất kỳ hướng nào |
| 3 | tự động Nó là mặc định và trình duyệt đặt một con trỏ |
| 4 | ô Nó chỉ ra rằng một ô (hoặc một tập hợp các ô) có thể được chọn |
| 5 | trình đơn ngữ cảnh Nó chỉ ra rằng một menu ngữ cảnh có sẵn |
| 6 | col-resize Nó chỉ ra rằng cột có thể được thay đổi kích thước theo chiều ngang |
| 7 | sao chép Nó chỉ ra thứ gì đó sẽ được sao chép |
| 8 | xương chéo Nó hiển thị như một hình chữ thập |
| 9 | mặc định Nó hiển thị con trỏ mặc định |
| 10 | e-resize Nó chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang phải (phía đông) |
| 11 | ew-resize Nó chỉ ra một con trỏ thay đổi kích thước hai chiều |
| 12 | lấy Nó chỉ ra rằng một cái gì đó có thể được nắm lấy |
| 13 | nắm bắt Nó chỉ ra rằng một cái gì đó có thể được nắm lấy |
| 14 | trợ giúp Nó chỉ ra rằng sự trợ giúp có sẵn |
| 15 | di chuyển Nó chỉ ra một cái gì đó sẽ được di chuyển |
| 16 | n-thay đổi kích thước Nó chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên (phía bắc) |
| 17 | ne-thay đổi kích thước Nó 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) |
| 18 | nesw-thay đổi kích thước Nó chỉ ra một con trỏ thay đổi kích thước hai chiều |
| 19 | ns-thay đổi kích thước Nó chỉ ra một con trỏ thay đổi kích thước hai chiều |
| 20 | nw-thay đổi kích thước Nó 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) |
| 21 | nwse-resize Nó chỉ ra một con trỏ thay đổi kích thước hai chiều |
| 22 | không thả Nó chỉ ra rằng mục được kéo không thể được thả ở đây |
| 23 | không Không có con trỏ nào được hiển thị cho phần tử |
| 24 | không được phép Nó chỉ ra rằng hành động được yêu cầu sẽ không được thực hiện |
| 25 | con trỏ Nó là một con trỏ và chỉ ra một liên kết |
| 26 | tiến trình Nó chỉ ra rằng chương trình đang bận (đang diễn ra) |
| 27 | thay đổi kích thước hàng Nó chỉ ra rằng hàng có thể được thay đổi kích thước theo chiều dọc |
| 28 | s-thay đổi kích thước Nó chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống (phía nam) |
| 29 | se-thay đổi kích thước Nó 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) |
| 30 | thay đổi kích thước sw Nó 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) |
| 31 | văn bản Nó cho biết văn bản có thể được chọn |
| 32 | URL Danh sách các URL được phân tách bằng dấu phẩy cho các con trỏ tùy chỉnh với một con trỏ chung được đề cập ở cuối dưới dạng một lỗi an toàn |
| 33 | văn bản dọc Nó cho biết văn bản dọc có thể được chọn |
| 34 | w-thay đổi kích thước Nó chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang trái (phía tây) |
| 35 | đợi Nó chỉ ra rằng chương trình đang bận |
| 36 | phóng to Nó chỉ ra rằng một cái gì đó có thể được phóng to |
| 37 | thu nhỏ Nó chỉ ra rằng một cái gì đó có thể được thu nhỏ |
| 38 | tên đầu tiên Nó đặt thuộc tính con trỏ thành giá trị mặc định của nó. |
| 39 | kế thừa Nó kế thừa thuộc tính con trỏ từ phần tử cha của nó. |
Sau đây là một ví dụ để triển khai thuộc tính con trỏ CSS
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">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html> Đầu ra
