Thuộc tính con trỏ của CSS cho phép bạn chỉ định loại con trỏ sẽ được hiển thị cho người dùng
Một cách sử dụng tốt thuộc tính này là sử dụng hình ảnh cho các nút gửi trên biểu mẫu. Theo mặc định, khi con trỏ di chuyển qua một liên kết, con trỏ sẽ thay đổi từ con trỏ thành bàn tay. Tuy nhiên, nó không thay đổi biểu mẫu cho nút gửi trên biểu mẫu. Do đó, bất cứ khi nào ai đó di chuột qua một hình ảnh là nút gửi, nó sẽ cung cấp manh mối trực quan rằng hình ảnh đó có thể nhấp được
Bảng sau đây hiển thị các giá trị có thể có cho thuộc tính con trỏ -
Sr. Không. Giá trị và Mô tảtự động
Hình dạng của con trỏ phụ thuộc vào khu vực ngữ cảnh mà nó kết thúc. Ví dụ: tôi chuyển qua văn bản, chuyển giao liên kết, v.v.
2chữ thập
Dấu thập hoặc dấu cộng
3mặc định
Một mũi tên
4con trỏ
Một bàn tay trỏ [trong IE 4 giá trị này là bàn tay]
5di chuyển
thanh tôi
6thay đổi kích thước điện tử
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang phải [về phía đông]
7thay đổi kích thước
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên và sang phải [bắc/đông]
8thay đổi kích thước nw
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên và sang trái [bắc/tây]
9thay đổi kích thước n
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên [phía bắc]
10thay đổi kích thước
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống dưới và sang phải [nam/đông]
11thay đổi kích thước sw
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống dưới và sang trái [nam/tây]
12thay đổi kích thước s
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống [phía nam]
13thay đổi kích thước w
Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang trái [tây]
14chữ
thanh tôi
15đợi đã
Một chiếc đồng hồ cát
16Cứu giúp
Một dấu chấm hỏi hoặc bong bóng, lý tưởng để sử dụng trên các nút trợ giúp
17Nguồn của tệp hình ảnh con trỏ
LƯU Ý – Bạn nên cố gắng chỉ sử dụng những giá trị này để thêm thông tin hữu ích cho người dùng và ở những nơi, họ sẽ thấy con trỏ đó. Ví dụ: sử dụng hình chữ thập khi ai đó di chuột qua một liên kết có thể khiến khách truy cập nhầm lẫn
Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng focus:cursor-auto
để chỉ áp dụng tiện ích cursor-auto
vào tiêu điểm
Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States
Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng
module.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
0 để áp dụng tiện ích cursor-auto
chỉ với kích thước màn hình trung bình trở lênĐể tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và
Sử dụng các giá trị tùy chỉnh
Tùy chỉnh chủ đề của bạn
Theo mặc định, Tailwind bao gồm
module.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
2 tiện ích cho nhiều tùy chọn tích hợp. Bạn có thể tùy chỉnh các giá trị này bằng cách chỉnh sửa module.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
3 hoặc module.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
4 trong tệp module.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
0 của mìnhmodule.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu
Giá trị tùy ý
Nếu bạn cần sử dụng một giá trị
module.exports = {
theme: {
extend: {
cursor: {
'fancy': 'url[hand.cur], pointer',
}
}
}
}
2 một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo nhanh một thuộc tính bằng cách sử dụng bất kỳ giá trị tùy ý nào Hầu như tất cả các trang web đang thay đổi con trỏ để có trải nghiệm người dùng tốt hơn hoặc chỉ để giải trí. Tùy chỉnh con trỏ là một cách dễ dàng để thêm phần khởi sắc cho trang web của bạn khi cần
Để chỉ định giao diện con trỏ, hãy sử dụng thuộc tính con trỏ CSS, được sử dụng để thay đổi loại con trỏ chuột trên các phần tử. Nó có thể hữu ích trong các trang web nơi các hành động khác nhau nên được thực hiện thay vì chỉ nhấp vào
Chúng tôi sẽ đề cập đến các cách sau để quản lý khả năng sử dụng con trỏ
Nếu bạn muốn thay đổi con trỏ chuột thành con trỏ tay khi di chuột qua mục danh sách, bạn có thể đặt lớp cho mục danh sách của mình [
Bây giờ hãy xem một ví dụ về việc thay đổi con trỏ chuột thành con trỏ tay bằng cách sử dụng giá trị "con trỏ" của thuộc tính con trỏ. Chúng tôi chỉ đặt loại con trỏ đó trên lớp "con trỏ"
Title of the document
Hover over the list items to see how the default cursor changes into a pointer:
- List item 1 with the default cursor.
- List item 2 with the pointer cursor.
- Another list item with the default mouse cursor.
Kết quả
Di chuột qua các mục trong danh sách để xem con trỏ mặc định thay đổi thành con trỏ như thế nào
- Liệt kê mục 1 với con trỏ mặc định
- Liệt kê mục 2 với con trỏ con trỏ
- Một mục danh sách khác có con trỏ chuột mặc định
Trong ví dụ tiếp theo, các. bộ chọn con thứ n được sử dụng. Ở đây, chúng tôi sử dụng con thứ n[lẻ] cho con trỏ. phát triển; . con trỏ;
Title of the document
Hover over the list items to see how the cursor changes:
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
- List item 6
- List item 7
Con trỏ mặc định cho một siêu kết nối là "con trỏ". Để thay đổi nó, bạn cần chỉ định loại con trỏ cho phần tử của mình bằng CSS. bộ chọn di chuột. Trong ví dụ của chúng tôi, chúng tôi chỉ tạo kiểu cho lớp "liên kết"
Title of the document
Hover over the hyperlink to see how the "pointer" changes to "default":
W3docs
link with the initial "pointer" type.
W3docs
link with the changed "default" cursor type.
Vì các liên kết có màu xanh lam và gạch chân theo mặc định, chúng tôi khuyên bạn nên thay đổi màu sắc của liên kết và tiến xa hơn với các siêu liên kết
Title of the document
Hãy làm nhiều điều thú vị hơn với con trỏ. Có thể thêm hình ảnh làm con trỏ trên trang web của bạn. Bạn chỉ cần thêm hình ảnh của mình bằng cách chỉ định URL của nó làm giá trị của thuộc tính con trỏ
Nhớ thiết lập loại con trỏ để hiển thị khi trình duyệt không sử dụng được hình ảnh cung cấp. Nếu không, mã của bạn sẽ không hoạt động
Đây là một thủ thuật thú vị để thêm vào trang web của bạn khi người dùng không muốn nhìn thấy những thứ như vậy. Hãy tưởng tượng bạn có một biểu mẫu mà câu trả lời tương ứng với một cảm xúc cụ thể, đây là nơi lý tưởng để sử dụng hình ảnh biểu tượng cảm xúc
Title of the document
What is your impression of our website?
Happy
Sad
Love
Title of the document
Bạn cũng có thể sử dụng các biểu tượng từ các trang web cung cấp mã Base64, chỉ cần dán mã Base64 vào giá trị URL của con trỏ. Hoặc tải biểu tượng xuống trang web của bạn và sử dụng URL để đặt con trỏ