Thuộc tính cursor trong CSS
Thuộc tính cursor trong CSS xác định kiểu con trỏ được hiển thị khi trỏ tới một phần tử.
Thuộc tính cursor có thể nhận giá trị:
Bảng dưới đây liệt kê các giá trị mà thuộc tính cursor trong CSS 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 | Một 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ú: để thấy rõ hiệu ứng của các giá trị này, bạn nên thực hành thuộc tính cursor trong CSS với các giá trị khác nhau đã được trình bày ở trên. Ngoài ra, bạn cũng nên hiển thị hình dáng con trỏ cho phù hợp với ngữ cảnh để tránh gây hiểu nhầm hoặc truyền tải thông tin lỗi tới người dùng.
Thuộc tính cursor có thể áp dụng cho:
Tất cả các phần tử HTML.
Cú pháp thuộc tính cursor trong DOM
object.style.cueAfter = url("music.wav");
Ví dụ thuộc tính cursor trong CSS
Sau đây là ví dụ minh họa tất cả giá trị của thuộc tính cursor đã được trình bày ở trên.
<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>
Bạn thử di chuyển con trỏ chuột qua các phần text để thấy hiệu ứng của thuộc tính cursor trong CSS:
Đã 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:
