Thuộc tính cursor trong CSS

65 lượt xem

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.

mousepointer

Để á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.

demo1

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:

mouseicon

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.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz