Hướng dẫn thay đổi con trỏ chuột trong web

 

Thay đổi hình dạng con trỏ chuột trong web

Thay đổi con trỏ chuột sẽ làm trang web của bạn trông sinh động hơn giúp người xem cảm thấy hứng thú.

Chúng ta sẽ dán hai đoạn code bên dưới trước thẻ đóng "]]></b:skin>".

1. Để sử dụng đối với con trỏ chuột bình thường, ta dùng code:

html,body{cursor: url("link_con_trỏ_chuột"), progress;}

Ví dụ

html,body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxBN_E46wUFcLid_g5455La5Sd4UUp7GpQM443L6iVRH1V6psiBYZjmXE-7y8HJGVFi-ULl7HiBgPRs4APf3YPQPqD9mNhjoZOl00QtrH9wukq3imr3rpi60_UyM4XQJkbJqb8cPkgCzc/s1600/khoirom3.png"), progress;}

2. Để sử dụng đối với con trỏ chuột khi rê vào link hoặc hình ảnh, ta dùng code:

a:hover{cursor : url("link_con_trỏ_chuột"), progress;}

Ví dụ

a:hover{cursor : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZUpwI7TPZZ-fbkJnnkWRdKqc4pLxFT38ltA7eY0j3rzzdHinfuEThCCvRLjM1MB0phddBNW2GggBRRlVcK-1vx59JQ6bEbuaV8NbDfC9fZZRMuCeK1C4T1ZkXbUuIIkxGxPeKCNMitwk/s1600/khoirom4.png"), progress;}

Để thay đổi hình dạng con trỏ chuột các bạn có thể chọn mẫu trong trang cursors-4u.com sau đó nhấp chuột phải chọn Open Image In New Tab là ta sẽ có đường dẫn của ảnh đó có đuôi .png hoặc .gif

Hình minh họa

Chúc các bạn thành công

Nguồn: tổng hợp
Video hướng dẫn