Thuộc tính cursor của CSS

Định nghĩa và cách sử dụng

Thuộc tính cursor quy định loại con trỏ cần hiển thị (hình dáng).

Thuộc tính này xác định hình dáng con trỏ khi chuột được đặt trong phạm vi biên giới của một yếu tố (mặc dù CSS2.1 không xác định biên giới nào xác định phạm vi này).

Xem thêm:

Giáo trình CSSĐịnh vị CSS

Hướng dẫn tham khảo HTML DOMThuộc tính cursor

Ví dụ

Một số con trỏ khác nhau:

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

Thử ngay

Cú pháp CSS

cursor: value;

Giá trị thuộc tính

Giá trị Mô tả
url

URL cần sử dụng con trỏ tùy chỉnh.

Ghi chú：Luôn xác định một con trỏ thông thường ở cuối danh sách này để tránh trường hợp không có con trỏ có thể sử dụng được được định nghĩa bởi URL.
default Con trỏ mặc định (thường là một mũi tên).
auto Mặc định. Con trỏ được thiết lập bởi trình duyệt.
crosshair Con trỏ hiển thị dưới dạng dấu chéo.
pointer Con trỏ hiển thị dưới dạng con trỏ chỉ đường dẫn (tay).
move Con trỏ này chỉ ra rằng đối tượng có thể di chuyển.
e-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển sang phải (đông).
ne-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển lên và sang phải (bắc/đông).
nw-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển lên và sang trái (bắc/tây).
n-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển lên (bắc).
se-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển xuống và sang phải (nam/đông).
sw-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển xuống và sang trái (nam/tây).
s-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển xuống (nam).
w-resize Con trỏ này chỉ ra rằng cạnh khung vuông có thể di chuyển sang trái (tây).
text Con trỏ này chỉ ra rằng có văn bản.
wait Con trỏ này chỉ ra rằng chương trình đang bận (thường là một đồng hồ hoặc một cốc cát).
help Con trỏ này chỉ ra rằng có thể sử dụng trợ giúp (thường là một dấu hỏi hoặc một bóng bay).

Chi tiết kỹ thuật

Giá trị mặc định: auto
Thừa kế: yes
Phiên bản： CSS2
Cú pháp JavaScript： object.style.cursor="crosshair"

TIY ví dụ

Thay đổi con trỏ
Ví dụ này minh họa cách thay đổi con trỏ.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
5.0 5.5 4.0 5.0 9.6

Ghi chú：Opera 9.3 và Safari 3 không hỗ trợ url giá trị.