Con Trỏ (cursor) Trong CSS - Học CSS Online - VietTuts

Trang chủ » Trỏ Chuột Css » Con Trỏ (cursor) Trong CSS - Học CSS Online - VietTuts

Có thể bạn quan tâm

Thuộc tính padding trong CSS Thuộc tính outline trong CS

Nội dung chính

  • Thuộc tính cursor trong CSS
  • Ví dụ thuộc tính cursor trong CSS

Thuộc tính cursor 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ị Mô 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.

Ví dụ thuộc tính cursor trong CSS

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> <meta charset="UTF-8"> </head> <body> <p> Di chuyển con trỏ qua các văn bản sau để thấy hình dáng con trỏ: </p> <div style="cursor:auto">Kiểu auto</div> <div style="cursor:crosshair">Kiểu crosshair</div> <div style="cursor:default">Kiểu default</div> <div style="cursor:pointer">Kiểu pointer</div> <div style="cursor:move">Kiểu move</div> <div style="cursor:e-resize">Kiểu e-resize</div> <div style="cursor:ne-resize">Kiểu ne-resize</div> <div style="cursor:nw-resize">Kiểu nw-resize</div> <div style="cursor:n-resize">Kiểu n-resize</div> <div style="cursor:se-resize">Kiểu se-resize</div> <div style="cursor:sw-resize">Kiểu sw-resize</div> <div style="cursor:s-resize">Kiểu s-resize</div> <div style="cursor:w-resize">Kiểu w-resize</div> <div style="cursor:text">Kiểu text</div> <div style="cursor:wait">Kiểu wait</div> <div style="cursor:help">Kiểu help</div> </body> </html>

Kết quả:

Thuộc tính padding trong CSS Thuộc tính outline trong CS

Từ khóa » Trỏ Chuột Css