Hướng dẫn how do i change the default cursor in css? - làm cách nào để thay đổi con trỏ mặc định trong css?

Thử nó

Cú pháp

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor: url(cursor_1.png) 4 12, auto;
cursor: url(cursor_2.png) 2 2, pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Thuộc tính cursor được chỉ định là các giá trị hoặc nhiều hơn, được phân tách bằng dấu phẩy, theo sau là một giá trị từ khóa bắt buộc duy nhất. Mỗi nên trỏ đến một tệp hình ảnh. Trình duyệt sẽ cố gắng tải hình ảnh đầu tiên được chỉ định, rơi trở lại tiếp theo nếu không thể và rơi trở lại giá trị từ khóa nếu không có hình ảnh nào có thể được tải (hoặc nếu không được chỉ định).

Mỗi có thể được theo tùy chọn theo sau một cặp số được phân tách không gian, đặt tọa độ của điểm nóng của con trỏ so với góc trên cùng bên trái của hình ảnh.

Giá trị

Tùy chọnOptional

Một danh sách

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

Các tọa độ x và y tùy chọn chỉ ra điểm nóng con trỏ; Vị trí chính xác trong con trỏ đang được chỉ ra.

Các số nằm trong đơn vị của pixel hình ảnh. Chúng liên quan đến góc trên cùng bên trái của hình ảnh, tương ứng với "

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

Giá trị từ khóa phải được chỉ định, cho biết loại con trỏ sẽ sử dụng hoặc con trỏ dự phòng để sử dụng nếu tất cả các biểu tượng được chỉ định không tải.

Các từ khóa có sẵn được liệt kê trong bảng dưới đây. Khác với

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

Định nghĩa chính thức

Cú pháp chính thức

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

Ghi chú sử dụng

Giới hạn kích thước biểu tượng

Mặc dù đặc điểm kỹ thuật không giới hạn kích thước hình ảnh cursor, các tác nhân người dùng thường hạn chế chúng để tránh lạm dụng tiềm năng. Ví dụ, trên hình ảnh con trỏ Firefox và Chromium bị giới hạn ở 128x128 pixel theo mặc định, nhưng bạn nên giới hạn kích thước hình ảnh con trỏ ở 32x32 pixel. Thay đổi con trỏ bằng cách sử dụng hình ảnh lớn hơn kích thước hỗ trợ tối đa của tác nhân người dùng thường sẽ bị bỏ qua.

Các định dạng tệp hình ảnh được hỗ trợ

Các tác nhân người dùng được yêu cầu bởi đặc điểm kỹ thuật để hỗ trợ các tệp PNG, tệp SVG V1.1 ở chế độ tĩnh an toàn có chứa kích thước tự nhiên và bất kỳ định dạng tệp hình ảnh nào khác mà chúng hỗ trợ cho hình ảnh trong các thuộc tính khác. Các trình duyệt máy tính để bàn cũng hỗ trợ rộng rãi định dạng tệp

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Thông số kỹ thuật cho thấy thêm rằng các tác nhân người dùng cũng nên hỗ trợ các tệp SVG V1.1 ở chế độ hoạt hình an toàn có chứa kích thước tự nhiên, cùng với bất kỳ định dạng tệp hình ảnh hoạt hình nào khác mà chúng hỗ trợ cho hình ảnh trong các thuộc tính khác. Các tác nhân người dùng có thể hỗ trợ cả hình ảnh SVG tĩnh và hoạt hình không chứa kích thước tự nhiên.

Ghi chú khác

Thay đổi con trỏ mà các khu vực thanh công cụ giao nhau thường bị chặn để tránh giả mạo.

Ví dụ

Đặt các loại con trỏ

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Xem thêm