cursor

Try it

cursor: pointer;

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

<section class="default-example container" id="default-example">
  <div id="example-element">
    Move over this element to see the cursor style.
  </div>
</section>

#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

Cú pháp

/* Giá trị từ khóa */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL với từ khóa dự phòng bắt buộc */
cursor: url("hand.cur"), pointer;

/* URL và tọa độ, với từ khóa dự phòng bắt buộc */
cursor:
  url("cursor_1.png") 4 12,
  auto;
cursor:
  url("cursor_2.png") 2 2,
  pointer;

/* URL và URL dự phòng (một số có tọa độ), với từ khóa dự phòng bắt buộc */
cursor:
  url("cursor_1.svg") 4 5,
  url("cursor_2.svg"),
  /* …, */ url("cursor_n.cur") 5 5,
  progress;

/* Giá trị toàn cục */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Thuộc tính cursor được chỉ định là không hoặc nhiều giá trị <url>, 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 <url> nên trỏ đến một tệp ảnh. Trình duyệt sẽ thử tải ảnh đầu tiên được chỉ định, nếu không tải được sẽ chuyển sang ảnh tiếp theo, và nếu không tải được ảnh nào (hoặc không có ảnh nào được chỉ định) sẽ dùng giá trị từ khóa.

Mỗi <url> có thể tùy chọn theo sau bởi một cặp số phân tách bằng khoảng trắng, đặt tọa độ <x> và <y> của điểm nóng con trỏ so với góc trên bên trái của ảnh.

Giá trị

<url> Optional

Một url() hoặc danh sách phân tách bằng dấu phẩy url(), url(), …, trỏ đến một tệp ảnh. Có thể cung cấp nhiều hơn một <url> làm dự phòng, trong trường hợp một số loại ảnh con trỏ không được hỗ trợ. Một dự phòng không phải URL (một hoặc nhiều giá trị từ khóa) phải nằm ở cuối danh sách dự phòng.

<x>, <y> Optional

Tọa độ x và y tùy chọn cho biết điểm nóng của con trỏ; vị trí chính xác trong con trỏ đang được trỏ tới.

Các số tính bằng đơn vị pixel ảnh. Chúng tương đối với góc trên bên trái của ảnh, tương ứng với 0 0, và bị giới hạn trong phạm vi ảnh con trỏ. Nếu các giá trị này không được chỉ định, chúng có thể được đọc từ chính tệp, và nếu không có sẽ mặc định về góc trên bên trái của ảnh.

keyword

Một giá trị từ khóa phải được chỉ định, cho biết kiểu con trỏ cần sử dụng, hoặc con trỏ dự phòng sẽ dùng nếu tất cả các biểu tượng đã chỉ định đều tải thất bại.

Các từ khóa có sẵn được liệt kê trong bảng bên dưới. Ngoại trừ none, có nghĩa là không có con trỏ, có một ảnh cho thấy cách các con trỏ từng được hiển thị. Bạn có thể di chuột qua các hàng trong bảng để xem tác dụng của các giá trị từ khóa con trỏ khác nhau trên trình duyệt của bạn hiện nay.

Danh mục	Từ khóa	Ví dụ	Mô tả
Chung	auto		Tác nhân người dùng sẽ xác định con trỏ hiển thị dựa trên ngữ cảnh hiện tại. Ví dụ: tương đương với text khi di chuột qua văn bản.
	default		Con trỏ mặc định phụ thuộc nền tảng. Thường là một mũi tên.
	none		Không hiển thị con trỏ.
Liên kết & trạng thái	context-menu		Có một menu ngữ cảnh.
	help		Có thông tin trợ giúp.
	pointer		Con trỏ là một mũi tên chỉ liên kết. Thường là ảnh bàn tay đang chỉ.
	progress		Chương trình đang bận trong nền, nhưng người dùng vẫn có thể tương tác với giao diện (khác với wait).
	wait		Chương trình đang bận, và người dùng không thể tương tác với giao diện (khác với progress). Đôi khi là ảnh đồng hồ cát hoặc đồng hồ.
Lựa chọn	cell		Ô bảng hoặc tập hợp ô có thể được chọn.
	crosshair		Con trỏ hình chữ thập, thường dùng để chỉ lựa chọn trong ảnh bitmap.
	text		Văn bản có thể được chọn. Thường có hình dạng chữ I.
	vertical-text		Văn bản dọc có thể được chọn. Thường có hình dạng chữ I nằm ngang.
Kéo & thả	alias		Sẽ tạo một bí danh hoặc lối tắt.
	copy		Sẽ sao chép thứ gì đó.
	move		Sẽ di chuyển thứ gì đó.
	no-drop		Một mục không thể được thả tại vị trí hiện tại. Firefox bug 275173: Trên Windows và macOS, no-drop giống với not-allowed.
	not-allowed		Hành động yêu cầu sẽ không được thực hiện.
	grab		Thứ gì đó có thể được nắm (kéo để di chuyển).
	grabbing		Thứ gì đó đang được nắm (kéo để di chuyển).
Thay đổi kích thước & cuộn	all-scroll		Thứ gì đó có thể cuộn theo bất kỳ hướng nào (kéo). Firefox bug 275174: Trên Windows, all-scroll giống với move.
	col-resize		Mục/cột có thể thay đổi kích thước theo chiều ngang. Thường được hiển thị dưới dạng mũi tên trái và phải với thanh dọc phân tách.
	row-resize		Mục/hàng có thể thay đổi kích thước theo chiều dọc. Thường được hiển thị dưới dạng mũi tên lên và xuống với thanh ngang phân tách.
	n-resize		Một cạnh nào đó sẽ được di chuyển. Ví dụ: con trỏ se-resize được sử dụng khi di chuyển bắt đầu từ góc đông nam của hộp. Trong một số môi trường, một con trỏ thay đổi kích thước hai chiều tương đương sẽ được hiển thị. Ví dụ: n-resize và s-resize giống với ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Con trỏ thay đổi kích thước hai chiều.
	ns-resize
	nesw-resize
	nwse-resize
Thu phóng	zoom-in		Thứ gì đó có thể được phóng to hoặc thu nhỏ.
	zoom-out

Định nghĩa hình thức

Cú pháp hình thức

Ghi chú sử dụng

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

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

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

Tác nhân người dùng được yêu cầu theo đặc tả phải hỗ trợ tệp PNG, tệp SVG v1.1 ở chế độ tĩnh bảo mật có kích thước tự nhiên, và bất kỳ định dạng tệp ảnh không hoạt họa nào khác mà họ hỗ trợ cho ảnh trong các thuộc tính khác. Trình duyệt máy tính để bàn cũng hỗ trợ rộng rãi định dạng tệp .cur.

Đặc tả tiếp tục chỉ ra rằng tác nhân người dùng nên cũng hỗ trợ tệp SVG v1.1 ở chế độ hoạt họa bảo mật có kích thước tự nhiên, cùng với bất kỳ định dạng tệp ảnh hoạt họa nào khác mà họ hỗ trợ cho ảnh trong các thuộc tính khác. Tác nhân người dùng có thể hỗ trợ cả ảnh SVG tĩnh lẫn hoạt họa không có kích thước tự nhiên.

iPadOS

iPadOS hỗ trợ thiết bị con trỏ như trackpad và chuột. Theo mặc định, con trỏ iPad được hiển thị dưới dạng hình tròn, và giá trị duy nhất được hỗ trợ sẽ thay đổi giao diện con trỏ là text.

Ghi chú khác

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

Ví dụ

Đặt kiểu con trỏ

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* Giá trị từ khóa dự phòng là bắt buộc khi sử dụng URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• pointer-events
• Kiểu <url>
• Thuộc tính SVG cursor