- Trang chủ
- Tham khảo
- CSS
- 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
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ị.
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:
HỌC WEB CHUẨN
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
Hiển thị trình duyệt khi có CSS:
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
Example
CSS can generate a bunch of different mouse cursors:
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing
{cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize
{cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url[myBall.cur],auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
Try it Yourself »
Definition and Usage
The cursor
property specifies the mouse cursor to be
displayed when pointing over an element.
auto |
yes |
no. Read about animatable |
CSS2 |
object.style.cursor="crosshair" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
CSS Syntax
Property Values
alias | The cursor indicates an alias of something is to be created | Play it » |
all-scroll | The cursor indicates that something can be scrolled in any direction | Play it » |
auto | Default. The browser sets a cursor | Play it » |
cell | The cursor indicates that a cell [or set of cells] may be selected | Play it » |
col-resize | The cursor indicates that the column can be resized horizontally | Play it » |
context-menu | The cursor indicates that a context-menu is available | Play it » |
copy | The cursor indicates something is to be copied | Play it » |
crosshair | The cursor render as a crosshair | Play it » |
default | The default cursor | Play it » |
e-resize | The cursor indicates that an edge of a box is to be moved right [east] | Play it » |
ew-resize | Indicates a bidirectional resize cursor | Play it » |
grab | The cursor indicates that something can be grabbed | Play it » |
grabbing | The cursor indicates that something can be grabbed | Play it » |
help | The cursor indicates that help is available | Play it » |
move | The cursor indicates something is to be moved | Play it » |
n-resize | The cursor indicates that an edge of a box is to be moved up [north] | Play it » |
ne-resize | The cursor indicates that an edge of a box is to be moved up and right [north/east] | Play it » |
nesw-resize | Indicates a bidirectional resize cursor | Play it » |
ns-resize | Indicates a bidirectional resize cursor | Play it » |
nw-resize | The cursor indicates that an edge of a box is to be moved up and left [north/west] | Play it » |
nwse-resize | Indicates a bidirectional resize cursor | Play it » |
no-drop | The cursor indicates that the dragged item cannot be dropped here | Play it » |
none | No cursor is rendered for the element | Play it » |
not-allowed | The cursor indicates that the requested action will not be executed | Play it » |
pointer | The cursor is a pointer and indicates a link | Play it » |
progress | The cursor indicates that the program is busy [in progress] | Play it » |
row-resize | The cursor indicates that the row can be resized vertically | Play it » |
s-resize | The cursor indicates that an edge of a box is to be moved down [south] | Play it » |
se-resize | The cursor indicates that an edge of a box is to be moved down and right [south/east] | Play it » |
sw-resize | The cursor indicates that an edge of a box is to be moved down and left [south/west] | Play it » |
text | The cursor indicates text that may be selected | Play it » |
URL | A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used | Play it » |
vertical-text | The cursor indicates vertical-text that may be selected | Play it » |
w-resize | The cursor indicates that an edge of a box is to be moved left [west] | Play it » |
wait | The cursor indicates that the program is busy | Play it » |
zoom-in | The cursor indicates that something can be zoomed in | Play it » |
zoom-out | The cursor indicates that something can be zoomed out | Play it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
HTML DOM reference: cursor property