Thay đổi con trỏ có thể không phải thuộc tính phổ biến nhất, nhưng vẫn là công cụ hữu ích cho nhà phát triển. Mặc dù trình duyệt tự động thay đổi con trỏ cho đối tượng nhất định, như liên kết và mục kéo thả, nhà phát triển có kết quả tốt hơn khi chỉ định con trỏ mong muốn cụ thể.
Thay Đổi Con Trỏ Chuột Trong CSS
Hình dạng con trỏ được điều khiển bởi thuộc tính CSS cursor. Thuộc tính này kiểm soát loại con trỏ hiển thị khi người dùng di chuột qua đối tượng. Ví dụ, di chuột qua đối tượng liên kết class dưới sẽ tạo mũi tên kéo 4 hướng:
.cursor { cursor: move; }
Khi di chuột qua đối tượng, người dùng sẽ thấy con trỏ như dưới.
Tùy Chọn Con Trỏ Chuẩn Trong CSS
Có nhiều tùy chọn con trỏ bạn có thể đặt. Lưu ý "N", "S", "W", "E" trong danh sách chỉ phương vị bắc, nam, đông, tây. Ví dụ, cursor: e-resize; hiển thị tay cầm thay đổi kích thước với mũi tên 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, phù thủy sau CSS-Tricks.com, tạo bản vẽ này giúp show các tùy chọn con trỏ CSS.
Dùng Hình Ảnh Làm Con Trỏ
Giống nhiều thuộc tính CSS, cursor cũng nhận thuộc tính qua URL. Ví dụ, class dưới dùng hình ảnh liên kết cho con trỏ.
.cursor {cursor: url('path/to/image.png'), auto;}
auto sau chỉ định con trỏ dự phòng. auto sẽ hiển thị con trỏ trình duyệt thường dùng cho đối tượng hiện tại dưới con trỏ. Bạn cũng có thể chỉ định thêm hình ảnh bằng danh sách phân cách dấu phẩy hoặc chỉ định bất kỳ con trỏ nào làm dự phòng.
.cursor {cursor: url(cursor.svg), url('path/to/image.png'), wait;}
Hoạt ảnh bất kỳ loại, dù GIF, SVG, PNG, không được trình duyệt hỗ trợ. Nhưng PNG trong suốt hoạt động trên mọi trình duyệt phổ biến. SVG không tin cậy trên Firefox, nhưng tốt trên trình duyệt khác.
Mặc định, "điểm nóng" (hot spot) con trỏ đặt ở góc trên trái hình ảnh. Để chỉ định "điểm nóng" khác, chỉ định cặp tọa độ (X,Y) trong gọi cursor. Ví dụ dưới đặt hot spot (3,3), dùng góc trên trái (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 bạn phát triển website, bạn có thể thêm thuộc tính CSS này vào bất kỳ đối tượng trang để thay đổi con trỏ người dùng thấy khi di chuột qua. Nếu bạn phiêu lưu hơn, bạn cũng dùng tiện ích mở rộng trình duyệt như Stylus, TamperMonkey, GreaseMonkey thực thi CSS tùy ý lên trang web. Cách này, bạn show con trỏ tùy chỉnh bất cứ khi nào và đâu muốn.