Thay đổi Con Trỏ Chuột Trong CSS Bằng Thuộc Tính Con Trỏ

Trang chủ » Trỏ Chuột Css » Thay đổi Con Trỏ Chuột Trong CSS Bằng Thuộc Tính Con Trỏ

Có thể bạn quan tâm

Bài viết / Web / Css Thứ ba, 08/09/2020 | 00:00 GMT+7 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

Tự động mặc định không ai con trỏ

Con trỏ cuộn

cuộn tất cả

Con trỏ trạng thái

danh mục Cứu giúp chờ đợi phát triển

Con trỏ lựa chọn

crosshair ô bản văn văn bản dọc

Kéo & Thả Con trỏ

bí danh sao chép di chuyển không đánh rơi không cho phép

Thu phóng con trỏ

phóng to thu nhỏ

Lấy con trỏ

vồ lấy nắm lấy

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

thay đổi kích thước điện tử n-thay đổi kích thước mới thay đổi kích thước nw-thay đổi kích thước s-thay đổi kích thước thay đổi kích thước thay đổi kích thước w-thay đổi kích thước ew-resize ns-thay đổi kích thước nesw-thay đổi kích thước nwse-resize thay đổi kích thước thay đổi kích thước hàng

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:

Dino Sammy Cursor

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.
Tags:

Các tin liên quan

Cắt image trong CSS với đối tượng phù hợp 2020-09-03 image đường viền và đường viền Gradient trong CSS thuần túy 2020-09-03 Inline so với Inline-Block Display trong CSS 2020-09-03 Bố cục lưới CSS: Đơn vị Fr 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 Thuộc tính khoảng trắng 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 Giới thiệu về Clipping Sử dụng clip-path trong CSS 2020-09-03 CSS Grid: Hợp lý và Căn chỉnh 2020-09-03

Từ khóa » Trỏ Chuột Css