Con trỏ trong CSS
Thuộc tính cursor trong CSS giúp bạn xác định kiểu con trỏ hiển thị tới người dùng.
Một cách sử dụng phổ biến của thuộc tính này là sử dụng các hình ảnh làm con trỏ hiển thị trong các nút submit trên các form. Theo mặc định, khi con trỏ hover qua một link, thì con trỏ chuột thay đổi từ dạnh con trỏ thành hình dạng một bàn tay.
Bảng dưới đây liệt kê các giá trị mà thuộc tính cursor có thể nhận:−
| Giá trị | Miêu tả |
|---|---|
| auto | Hình dáng của con trỏ phụ thuộc vào context mà nó di chuyển qua. Ví dụ, dạng một chữ I khi di chuyển qua văn bản hay một bàn tay khi di chuyển qua một link, …. |
| crosshair | Dạng crosshair hoặc dấu cộng |
| default | Một mũi tên |
| pointer | Hình dạng một bàn tay |
| move | Thanh I |
| e-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| ne-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| nw-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| n-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| se-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| sw-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| s-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| w-resize | Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp |
| text | Thanh I |
| wait | Hình dáng giống chiêc đồng hồ cát, chỉ rằng đang chờ xử lý |
| help | Một dấu chấm hỏi (?), sử dụng giá trị này cho các nút Help |
| <url> | Nguồn tới file chứa hình ảnh con trỏ |
Ghi chú: Bạn nên thực hành với từng giá trị thuộc tính trên để đỡ nhầm lần trong khi sử dụng và cũng giúp cho bạn hiển thị hình dáng con trỏ chuột thích hợp tới người sử dụng. Chẳng hạn, nếu một người sử dụng di chuyển chuột vào một link, bạn lại hiển thị con trỏ chuột dạng đồng hồ cát mà biểu thị rằng đang chờ xử lý, thì đó là sự nhầm lẫn khá khôi hài.
Dưới đây là ví dụ minh họa cách sử dụng các giá trị của thuộc tính cursor trong CSS.
<html>
<head>
</head>
<body>
<p>Di chuyen con tro chuot qua cac phan text sau de thay cac hinh dang con tro khac nhau:</p>
<div style="cursor:auto">Gia tri auto</div>
<div style="cursor:crosshair">Gia tri crosshair</div>
<div style="cursor:default">Gia tri default</div>
<div style="cursor:pointer">Gia tri pointer</div>
<div style="cursor:move">Gia tri move</div>
<div style="cursor:e-resize">Gia tri e-resize</div>
<div style="cursor:ne-resize">Gia tri ne-resize</div>
<div style="cursor:nw-resize">Gia tri nw-resize</div>
<div style="cursor:n-resize">Gia tri n-resize</div>
<div style="cursor:se-resize">Gia tri se-resize</div>
<div style="cursor:sw-resize">Gia tri sw-resize</div>
<div style="cursor:s-resize">Gia tri s-resize</div>
<div style="cursor:w-resize">Gia tri w-resize</div>
<div style="cursor:text">Gia tri text</div>
<div style="cursor:wait">Gia tri wait</div>
<div style="cursor:help">Gia tri help</div>
</body>
</html>
Kết quả là:
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
