Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ

---

con trỏ được sử dụng để thay đổi con trỏ chuột trên các phần tử cụ thể. Điều này đặc biệt hữu ích trong các ứng dụng web nơi có thể thực hiện các việc khác nhau ngoài việc nhấp chuột. Điều này rõ ràng chỉ hoạt động khi có một thiết bị trỏ:

.in-progress {
  cursor: progress;
}

Con trỏ khả dụng

Di chuột qua phần sau để xem các con trỏ khác nhau khả dụng nếu bạn đang sử dụng máy tính để bàn / notebook :

Con trỏ Chung / Mặc định

Con trỏ liên kết

Con trỏ cuộn

Con trỏ trạng thái

Con trỏ lựa chọn

Kéo & Thả Con trỏ

Thu phóng con trỏ

Lấy con trỏ

Thay đổi kích thước con trỏ

Con trỏ tùy chỉnh

Bạn có thể xác định con trỏ tùy chỉnh. Lưu ý không phải tất cả các trình duyệt đều hỗ trợ file svg cho con trỏ và file .cur được hỗ trợ trên toàn bộ bảng, vì vậy bạn có thể cung cấp một dự phòng .cur nếu bạn muốn sử dụng con trỏ svg. Bạn cũng có thể cung cấp dự phòng cho một trong những con trỏ không tùy chỉnh.

Bạn có thể xác định vị trí tùy chỉnh cho điểm phát con trỏ bằng cách thêm tọa độ x & y cho vị trí điểm phát sóng trong hình ảnh tùy chỉnh được cung cấp.

Lưu ý , khi sử dụng con trỏ svg, điều quan trọng là svg của bạn có giá trị chiều rộng và chiều cao trên phần tử svg root , nếu không con trỏ của bạn sẽ không hiển thị. Trong ví dụ sau, file svg ( server.svg ) của ta bắt đầu như sau:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">...

.custom-cur {
  cursor: url('/images/server.svg');
}

/* With a .cur fallback */
.custom-cur {
  cursor: url('/images/server.svg'),
  url('/images/server.cur');
}

/* With a custom hotspot */
.custom-cur {
  cursor: url('/images/server.svg') 10 12;
}

/* With a non-custom fallback: */
.custom-cur {
  cursor: url('/images/server.svg'),
  move;
}

Đây là một ví dụ với con trỏ tùy chỉnh:

Hỗ trợ trình duyệt:
Tính đến năm 2020, chỉ 80% trình duyệt trên toàn thế giới hỗ trợ con trỏ tùy chỉnh theo Tôi có thể sử dụng con trỏ css3 không? . Nhưng điều này không có gì đáng ngạc nhiên, nhiều trình duyệt không hỗ trợ nó là các trình duyệt chỉ dành cho thiết bị di động không có chức năng sử dụng con trỏ.

Kết luận :

Con trỏ tùy chỉnh thường được sử dụng nhất để cho biết một phần tử HTML không phải là một liên kết <a href="..."> có thể nhấp được. Nhưng nó cung cấp một loạt các khả năng cấu hình bổ sung có thể hữu ích cho các nhà phát triển xây dựng các ứng dụng web phong phú. Hãy ghi nhớ những lưu ý sau khi sử dụng con trỏ tùy chỉnh:

1. User của bạn dành phần lớn thời gian của họ trên các trang web khác , vì vậy hãy sử dụng con trỏ tùy chỉnh theo cách phù hợp với các trang web khác .
2. User màn hình cảm ứng (điện thoại di động và máy tính bảng) sẽ không nhìn thấy con trỏ tùy chỉnh.

---

---

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03