CSS 24 – Thuộc tính cursor cho con trỏ trong CSS

0
118

Thuộc tính cursor

Thuộc tính cursor trong CSS giúp bạn xác định kiểu con trỏ hiển thị tới người dùng.

Một cách sử dụng phổ biến của thuộc tính này là sử dụng các hình ảnh làm con trỏ hiển thị trong các nút submit trên các form. Theo mặc định, khi con trỏ hover qua một link, thì con trỏ chuột thay đổi từ dạng con trỏ thành hình dạng một bàn tay.

Giá trị của thuộc tính cursor

Có 7 loại con chuột chính là: “hand”, “crosshair”, “text”, “wait”, “move”, “wait”, và “resize”.

Thuộc tính cursor cho con trỏ trong CSS

Ngoài ra, bảng dưới đây liệt kê các giá trị mà thuộc tính cursor có thể nhận:

Kiểu con trỏHiển thịDi chuyển chuột vào đây để xem kiểu con trỏ
aliasDi chuyển chuột vào đây để xem kiểu con trỏ
all-scrollDi chuyển chuột vào đây để xem kiểu con trỏ
autoDi chuyển chuột vào đây để xem kiểu con trỏ
cellDi chuyển chuột vào đây để xem kiểu con trỏ
context-menuDi chuyển chuột vào đây để xem kiểu con trỏ
col-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
copyDi chuyển chuột vào đây để xem kiểu con trỏ
crosshairDi chuyển chuột vào đây để xem kiểu con trỏ
defaultDi chuyển chuột vào đây để xem kiểu con trỏ
e-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
ew-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
helpDi chuyển chuột vào đây để xem kiểu con trỏ
moveDi chuyển chuột vào đây để xem kiểu con trỏ
n-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
ne-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
nesw-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
ns-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
nw-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
nwse-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
no-dropDi chuyển chuột vào đây để xem kiểu con trỏ
noneDi chuyển chuột vào đây để xem kiểu con trỏ
not-allowedDi chuyển chuột vào đây để xem kiểu con trỏ
pointerDi chuyển chuột vào đây để xem kiểu con trỏ
progressDi chuyển chuột vào đây để xem kiểu con trỏ
row-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
s-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
se-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
sw-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
textDi chuyển chuột vào đây để xem kiểu con trỏ
vertical-textDi chuyển chuột vào đây để xem kiểu con trỏ
w-resizeDi chuyển chuột vào đây để xem kiểu con trỏ
waitDi chuyển chuột vào đây để xem kiểu con trỏ
zoom-inDi chuyển chuột vào đây để xem kiểu con trỏ
zoom-outDi chuyển chuột vào đây để xem kiểu con trỏ

Ghi chú: Bạn nên thực hành với từng giá trị thuộc tính trên để đỡ nhầm lần trong khi sử dụng và cũng giúp cho bạn hiển thị hình dáng con trỏ chuột thích hợp tới người sử dụng. Chẳng hạn, nếu một người sử dụng di chuyển chuột vào một link, bạn lại hiển thị con trỏ chuột dạng đồng hồ cát mà biểu thị rằng đang chờ xử lý, thì đó là sự nhầm lẫn khá không hay.

Ví dụ tổng quát

Dưới đây là ví dụ minh họa cách sử dụng các giá trị của thuộc tính cursor trong CSS.

Cách sử dụng hình ảnh để làm con trỏ

Chúng ta cũng có thể sử dụng hình ảnh để làm con trỏ cho phần tử khi người dùng di chuyển chuột vào phẩn tử đó.

Cú pháp

Ví dụ

Kết luận

Như vậy chúng ta đã tìm hiểu xong thuộc tính cursor trong CSS rồi, rất dễ đúng không nào.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây