Thuộc tính cursor trong CSS
Bùi Tấn Lực - 878
- 12/10/2025
Chức năng của Thuộc tính cursor trong CSS
Thuộc tính cursor trong CSS dùng để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML, mỗi hiệu ứng thường gắn liền với một chức năng nào đó.
Cú pháp của Thuộc tính cursor trong CSS
cursor: giatri;
giatri: Giá trị để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML (Ví dụ: alias, all-scroll,...)
Code Thuộc tính cursor trong CSS
cursor:alias
cursor:all-scroll
cursor:auto
cursor:cell
cursor:col-resize
cursor:context-menu
cursor:copy
cursor:crosshair
cursor:default
cursor:e-resize
cursor:ew-resize
cursor:grab
cursor:grabbing
cursor:help
cursor:move
cursor:n-resize
cursor:ne-resize
cursor:nesw-resize
cursor:ns-resize
cursor:nw-resize
cursor:nwse-resize
cursor:no-drop
cursor:none
cursor:not-allowed
cursor:pointer
cursor:progress
cursor:row-resize
cursor:s-resize
cursor:se-resize
cursor:sw-resize
cursor:text
cursor:url
cursor:w-resize
cursor:wait
cursor:zoom-in;
cursor:zoom-out;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính cursor trong CSS</title>
<style>
span{display: block;margin-bottom:10px}
span:hover{color:red}
</style>
</head>
<body>
<h1>Code Thuộc tính cursor trong CSS</h1>
<p>Dùng để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML, mỗi hiệu ứng thường gắn liền với một chức năng nào đó:</p>
<span style="cursor:alias">cursor:alias</span>
<span style="cursor:all-scroll">cursor:all-scroll</span>
<span style="cursor:auto">cursor:auto</span>
<span style="cursor:cell">cursor:cell</span>
<span style="cursor:col-resize">cursor:col-resize</span>
<span style="cursor:context-menu">cursor:context-menu</span>
<span style="cursor:copy">cursor:copy</span>
<span style="cursor:crosshair">cursor:crosshair</span>
<span style="cursor:default">cursor:default</span>
<span style="cursor:e-resize">cursor:e-resize</span>
<span style="cursor:ew-resize">cursor:ew-resize</span>
<span style="cursor:grab">cursor:grab</span>
<span style="cursor:grabbing">cursor:grabbing</span>
<span style="cursor:help">cursor:help</span>
<span style="cursor:move">cursor:move</span>
<span style="cursor:n-resize">cursor:n-resize</span>
<span style="cursor:ne-resize">cursor:ne-resize</span>
<span style="cursor:nesw-resize">cursor:nesw-resize</span>
<span style="cursor:ns-resize">cursor:ns-resize</span>
<span style="cursor:nw-resize">cursor:nw-resize</span>
<span style="cursor:nwse-resize">cursor:nwse-resize</span>
<span style="cursor:no-drop">cursor:no-drop</span>
<span style="cursor:none">cursor:none</span>
<span style="cursor:not-allowed">cursor:not-allowed</span>
<span style="cursor:pointer">cursor:pointer</span>
<span style="cursor:progress">cursor:progress</span>
<span style="cursor:row-resize">cursor:row-resize</span>
<span style="cursor:s-resize">cursor:s-resize</span>
<span style="cursor:se-resize">cursor:se-resize</span>
<span style="cursor:sw-resize">cursor:sw-resize</span>
<span style="cursor:text">cursor:text</span>
<span style="cursor:url">cursor:url</span>
<span style="cursor:w-resize">cursor:w-resize</span>
<span style="cursor:wait">cursor:wait</span>
<span style="cursor:zoom-in">cursor:zoom-in</span>
<span style="cursor:zoom-out">cursor:zoom-out</span>
</body>
</html>
Khi nào nên sử dụng các giá trị cursor trong CSS?
Việc thay đổi con trỏ chuột không chỉ nhằm tạo điểm nhấn cho giao diện mà còn giúp người dùng nhận biết nhanh một phần tử có thể thao tác hay không. Nên chọn giá trị cursor dựa trên hành động thực tế của từng thành phần, thay vì áp dụng cursor: pointer cho mọi trường hợp.
Sử dụng cursor: pointer cho phần tử có thể tương tác
cursor: pointer phù hợp với các phần tử mà người dùng có thể nhấp để thực hiện một hành động, chẳng hạn như nút, liên kết hoặc một khu vực mở nội dung khác. Cách này tạo tín hiệu trực quan rõ ràng, đặc biệt khi thiết kế không sử dụng kiểu hiển thị mặc định của trình duyệt.
Tuy nhiên, không nên thêm pointer chỉ để làm một phần tử trông giống như có thể nhấp. Nếu phần tử không thực hiện hành động nào khi người dùng nhấn vào, kiểu con trỏ này có thể gây hiểu nhầm.
Sử dụng cursor: not-allowed khi thao tác bị vô hiệu hóa
Khi một chức năng tạm thời không thể sử dụng, cursor: not-allowed giúp truyền đạt trạng thái đó ngay khi người dùng di chuyển chuột tới phần tử. Giá trị này phù hợp với các nút bị khóa, tùy chọn không khả dụng hoặc thao tác chưa đáp ứng điều kiện cần thiết.
Con trỏ chỉ nên đóng vai trò tín hiệu bổ trợ. Nếu một nút thực sự bị vô hiệu hóa, trạng thái đó vẫn cần được xử lý bằng HTML hoặc logic của ứng dụng thay vì chỉ thay đổi hình dạng con trỏ.
Sử dụng cursor: text cho khu vực có thể chọn văn bản
cursor: text thích hợp ở những khu vực mà người dùng có thể đặt con trỏ để chọn hoặc nhập văn bản. Đây là lựa chọn hữu ích cho các vùng nội dung có khả năng chỉnh sửa, ô nhập liệu hoặc những thành phần mà thao tác chính là làm việc với văn bản.
Việc dùng đúng kiểu con trỏ giúp người dùng phân biệt một vùng văn bản với thành phần có chức năng nhấp. Điều này đặc biệt có ích khi giao diện chứa nhiều loại phần tử nằm sát nhau.
Sử dụng cursor: grab và cursor: grabbing cho phần tử có thể kéo thả
Với giao diện hỗ trợ kéo thả, grab có thể được dùng để cho biết phần tử có khả năng kéo. Khi thao tác kéo đang diễn ra, grabbing giúp thể hiện trạng thái người dùng đang giữ và di chuyển phần tử đó.
Cặp giá trị này phù hợp với thanh trượt tùy biến, danh sách có thể sắp xếp lại, bản đồ hoặc các vùng nội dung có thao tác kéo. Việc thay đổi con trỏ theo trạng thái giúp phản hồi của giao diện trực quan hơn mà không cần thêm quá nhiều thành phần hướng dẫn.
Sử dụng cursor: zoom-in và cursor: zoom-out khi phóng to, thu nhỏ
zoom-in và zoom-out phù hợp với những thành phần có chức năng thay đổi mức phóng đại. Ví dụ, hình ảnh có thể được nhấp để xem lớn hơn có thể dùng zoom-in, trong khi khu vực đang ở chế độ thu nhỏ có thể sử dụng zoom-out.
Các giá trị này đặc biệt hữu ích khi chức năng phóng to không thể hiện rõ bằng nút bấm riêng. Tuy vậy, con trỏ không nên là dấu hiệu duy nhất cho biết thao tác tồn tại; giao diện vẫn nên có cách nhận biết khác để người dùng dễ sử dụng.
Có nên dùng cursor: none trong thiết kế website?
cursor: none sẽ ẩn con trỏ chuột khi người dùng di chuyển vào phần tử được áp dụng. Giá trị này có thể phù hợp với một số trải nghiệm tương tác đặc biệt như trò chơi trên trình duyệt, khu vực trình chiếu hoặc giao diện có con trỏ tùy chỉnh được thiết kế riêng.
Trong website thông thường, không nên sử dụng tùy tiện vì việc mất con trỏ mặc định có thể khiến người dùng khó nhận biết vị trí thao tác. Nếu sử dụng, cần bảo đảm giao diện vẫn cung cấp tín hiệu rõ ràng về các vùng có thể tương tác và không làm ảnh hưởng đến khả năng sử dụng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính cursor trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
