Thuộc tính con trỏ CSS
Ví dụ
CSS có thể tạo ra nhiều con trỏ chuột khác nhau:
.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;}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính cursor
chỉ định con trỏ chuột sẽ được hiển thị khi trỏ qua một phần tử.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | Đúng |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | object .style.cursor="crosshair" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
Cú pháp CSS
cursor: value ;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
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 |
Trang liên quan
Tham chiếu DOM HTML: thuộc tính con trỏ