Thuộc tính cursor

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

Thuộc tính cursor hiển thị con trỏ chuột khi duy chuyển con trỏ vào thành phần.

Cấu trúc

tag {
    cursor: giá trị;
}

Với giá trị như sau:

Hãy di chuyển con trỏ chuột tới từng dạng để thấy rõ sự hiện thị.

Thuộc tính giá trị Ví dụ Mô tả
cursor auto cursor: auto; Trình duyệt tự động thiết lập con trỏ chuột, đây là dạng mặc định.
crosshair cursor: crosshair; Con trỏ chuột dạng crosshair.
default cursor: default; Con trỏ chuột dạng default.
e-resize cursor: e-resize; Con trỏ chuột dạng e-resize.
help cursor: help; Con trỏ chuột dạng help.
move cursor: move; Con trỏ chuột dạng move.
n-resize cursor: n-resize; Con trỏ chuột dạng n-resize.
ne-resize cursor: ne-resize; Con trỏ chuột dạng ne-resize.
nw-resize cursor: nw-resize; Con trỏ chuột dạng nw-resize.
pointer cursor: pointer; Con trỏ chuột dạng pointer.
progress cursor: progress; Con trỏ chuột dạng progress.
s-resize cursor: s-resize; Con trỏ chuột dạng s-resize.
se-resize cursor: se-resize; Con trỏ chuột dạng se-resize.
sw-resize cursor: sw-resize; Con trỏ chuột dạng sw-resize.
text cursor: text; Con trỏ chuột dạng text.
w-resize cursor: w-resize; Con trỏ chuột dạng w-resize.
wait cursor: wait; Con trỏ chuột dạng wait.
inherit cursor: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

CSS viết:

p {
    cursor: crosshair;
}

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN

Di chuyển con trỏ vào text sẽ thấy hiệu ứng.

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính cursor được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype