Thuộc tính cursor trong CSS

Thuộc tính cursor là thuộc tính dùng để đổi hình dạng hiển thị chuột trên trang web. Có 7 loại con chuột chính là: “hand”, “crosshair”, “text”, “wait”, “move”, “wait”, và “resize”. Các bạn có thể tham khảo ví dụ Mouse over the words to change the cursor để biết thêm nhiều dạng con chuột khác.

Để áp dụng cho các phần tử trong HTML, đầu tiên tạo 1 vùng <div> với lớp tên là “div1” và định nghĩa phong cách của lớp này.

.div1
{
   width:100px;
   height:100px;
   background-color:pink;
   cursor: crosshair;
}
...
<div class="div1">Khi rê chuột thì hiển thị dạng con trỏ crosshair</div>

Kết quả, con chuột được chuyển thành dấu chữ thập như trong hình.

Nếu bạn muốn con chuột hiển thị 1 dạng khác ngoài các dạng mặc định, bạn có thể tạo 1 tập tin .ico hoặc tập tin .png (chỉ hoạt động với trình duyệt Chrome, Coccoc) để định nghĩa dạng chuột mới. Sau đó sử dụng đoạn mã:

body
{
     cursor:url("mousecursor.ico"), default;
}

Khi đó toàn bộ trang web đều hiển thị con chuột với hình dạng như sau:

Có nhiều trang áp dụng đổi chuột để làm trang trở nên bắt mắt hơn. Các bạn có thể dùng trang http://icoconvert.com/ để chuyển đổi định dạng 1 hình ảnh sang dạng .ico.