Đị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ợ
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