Kết nối

Thuộc tính cursor trong CSS

1.902 lượt xem 
 Cập nhật lần cuối: 22/12/2016 lúc 09:01:12
Thể loại: Thiết kế Web 

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.

Liên quan:  Cách sử dụng thuộc tính border-radius trong thiết kế menu
Trích dẫn bài viết
  • APA:
    Dammio. (2016). Thuộc tính cursor trong CSS. https://www.dammio.com/2016/09/30/thuoc-tinh-cursor-trong-css.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {Thuộc tính cursor trong CSS},
    year = {2016},
    url = {https://www.dammio.com/2016/09/30/thuoc-tinh-cursor-trong-css},
    urldate = {2024-03-15}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Nam Hải
Nam Hải
4 năm trước

mài mò để áp dung, cuối cùng đã thành công, mừng quá.

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x