Thay đổi con trỏ có thể không phải là thuộc tính phổ biến nhất trên thế giới, nhưng nó vẫn là một công cụ hữu ích cho các nhà phát triển. Trong khi các trình duyệt sẽ tự động thay đổi con trỏ cho các đối tượng nhất định, như liên kết và một số mục có thể kéo, các nhà phát triển có thể nhận được kết quả tốt hơn từ việc chỉ định cụ thể con trỏ mong muốn của họ.
Thay đổi điểm chuột trong CSS
Sự xuất hiện của con trỏ được kiểm soát bởi thuộc tính CSS con trỏ. Thuộc tính này kiểm soát loại con trỏ được hiển thị khi người dùng di chuột qua đối tượng. Ví dụ:di chuột qua đối tượng được liên kết với lớp bên dưới sẽ tạo ra mũi tên kéo bốn hướng:
.cursor { cursor: move;} Khi di chuột qua đối tượng, người dùng sẽ thấy một con trỏ như hình dưới đây.
Tùy chọn con trỏ tiêu chuẩn trong CSS
Bạn có thể đặt nhiều tùy chọn con trỏ để sử dụng con trỏ của mình. Lưu ý rằng “N,” “S,” “W” và “E” mà bạn thấy trong danh sách đề cập đến các hướng cơ bản của bắc, nam, đông và tây. Ví dụ:cursor: e-resize; hiển thị một tay cầm thay đổi kích thước với một mũi tên ở phía "phía đông" hoặc bên phải.
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;} Chris Coyier, trình hướng dẫn đằng sau CSS-Tricks.com, đã tạo hình tượng trưng này để giúp hiển thị các tùy chọn con trỏ khác nhau trong CSS.
Sử dụng Hình ảnh làm Con trỏ
Giống như nhiều thuộc tính CSS, thuộc tính con trỏ cũng có thể nhận các thuộc tính thông qua các đặc tả URL. Ví dụ:lớp bên dưới sẽ sử dụng hình ảnh được liên kết cho con trỏ.
.cursor {cursor: url('path/to/image.png'), auto;} Sau đó, tự động chỉ định một con trỏ dự phòng. Thuộc tính auto sẽ hiển thị bất kỳ con trỏ nào mà trình duyệt thường sử dụng cho đối tượng hiện tại bên dưới con trỏ. Bạn cũng có thể chỉ định hình ảnh bổ sung bằng danh sách được phân tách bằng dấu phẩy hoặc chỉ định bất kỳ con trỏ nào hoạt động như con trỏ dự phòng của bạn.
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;} Hoạt ảnh dưới bất kỳ hình thức nào, cho dù ở dạng GIF, SVG hay PNG, đều không được trình duyệt hỗ trợ. Nhưng PNG trong suốt hoạt động trên tất cả các trình duyệt web phổ biến trên thị trường hiện nay. SVG không đáng tin cậy trong Firefox, nhưng hoạt động tốt trên các trình duyệt khác.
Theo mặc định, "điểm nóng" của con trỏ sẽ được đặt ở góc trên cùng bên trái của hình ảnh. Để chỉ ra một “điểm nóng” khác, hãy chỉ định một cặp tọa độ (X, Y) trong lệnh gọi con trỏ của bạn. Ví dụ dưới đây sẽ đặt điểm nóng là (3,3), sử dụng phía trên bên trái là (0,0).
.cursor {cursor: url(cursor.svg) 3 3, pointer;} Kết luận:Sử dụng các thuộc tính này
Nếu đang phát triển một trang web, bạn có thể thêm các thuộc tính CSS này vào bất kỳ đối tượng nào trên trang web của mình để thay đổi con trỏ mà người dùng nhìn thấy khi di chuột qua đối tượng. Nếu thích mạo hiểm hơn, bạn cũng có thể sử dụng tiện ích mở rộng trình duyệt như Stylus, TamperMonkey hoặc GreaseMonkey để thực thi CSS tùy ý trên đầu trang web. Bằng cách này, bạn có thể hiển thị con trỏ tùy chỉnh của riêng mình bất cứ khi nào và bất cứ nơi nào bạn muốn.