Thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS

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ínhgiá trịVí dụMô tả
cursorautocursor: auto;Trình duyệt tự động thiết lập con trỏ chuột, đây là dạng mặc định.
crosshaircursor: crosshair;Con trỏ chuột dạng crosshair.
defaultcursor: default;Con trỏ chuột dạng default.
e-resizecursor: e-resize;Con trỏ chuột dạng e-resize.
helpcursor: help;Con trỏ chuột dạng help.
movecursor: move;Con trỏ chuột dạng move.
n-resizecursor: n-resize;Con trỏ chuột dạng n-resize.
ne-resizecursor: ne-resize;Con trỏ chuột dạng ne-resize.
nw-resizecursor: nw-resize;Con trỏ chuột dạng nw-resize.
pointercursor: pointer;Con trỏ chuột dạng pointer.
progresscursor: progress;Con trỏ chuột dạng progress.
s-resizecursor: s-resize;Con trỏ chuột dạng s-resize.
se-resizecursor: se-resize;Con trỏ chuột dạng se-resize.
sw-resizecursor: sw-resize;Con trỏ chuột dạng sw-resize.
textcursor: text;Con trỏ chuột dạng text.
w-resizecursor: w-resize;Con trỏ chuột dạng w-resize.
waitcursor: wait;Con trỏ chuột dạng wait.
inheritcursor: 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 LẬP TRÌNH</p>
</body>
</html>

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

Trình duyệt hỗ trợ

Thuộc tính cursor trong CSS 1

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

Bình luận