Tidadigi Logo

CSS Cursor Property

CSS Cursor dùng để chỉ định hình dạng con trỏ chuột khi trỏ vào một phần tử. Thuộc tính này được định nghĩa bằng các giá trị <url> cách nhau bởi dấu phẩy. Tiếp theo là 1 giá trị keyword bắt buộc, mỗi <url> trỏ đến tập tin ảnh.

Syntax:

cursor: value;

CSS Cursor Property Values

Đây là phiên bản dễ đọc hơn của các thuộc tính cursor dưới dạng bảng. Bảng này giúp bạn dễ dàng hiểu rõ hơn về các thuộc tính.

Cursor PropertyDescription
autoĐây là con trỏ mặc định do trình duyệt tự động thiết lập.
aliasCho biết một alias (shortcut) đang được tạo.
all-scrollCho biết toàn bộ phần tử có thể cuộn được.
cellCho biết người dùng đang chọn một ô hoặc tập hợp các ô.
context-menuGợi ý rằng có một context menu đang khả dụng.
col-resizeCho biết cột có thể thay đổi kích thước theo chiều ngang.
copyHiển thị rằng một cái gì đó sẽ được sao chép.
crosshairHiển thị một con trỏ hình chữ thập.
defaultĐây là con trỏ mặc định của hệ thống, thường là một mũi tên.
e-resizeCho biết cạnh của một hộp sẽ được di chuyển sang phải.
ew-resizeGợi ý thay đổi kích thước hai chiều trái-phải.
helpCho biết có trợ giúp hoặc thông tin bổ sung.
moveĐược sử dụng khi một cái gì đó có thể kéo hoặc di chuyển được.
n-resizeCho biết cạnh của một hộp sẽ được di chuyển lên trên.
ne-resizeCạnh của một hộp được di chuyển lên và sang phải.
nesw-resizeThay đổi kích thước hai chiều theo hướng đông bắc và tây nam.
ns-resizeGợi ý thay đổi kích thước hai chiều theo chiều dọc (lên-xuống).
nw-resizeCạnh của một hộp được di chuyển lên và sang trái.
nwse-resizeThay đổi kích thước hai chiều theo hướng tây bắc và đông nam.
no-dropCho biết một mục đã kéo không thể thả ở đây.
noneKhông có con trỏ nào được hiển thị.
not-allowedCho biết hành động được yêu cầu không thể thực thi.
pointerĐại diện cho một con trỏ, thường dùng cho các hyperlink.
progressCho biết hệ thống đang bận nhưng vẫn tương tác được.
row-resizeHiển thị rằng hàng có thể được thay đổi kích thước theo chiều dọc.
s-resizeCho biết cạnh của một hộp sẽ được di chuyển xuống dưới.
se-resizeCạnh của một hộp được di chuyển xuống và sang phải.
sw-resizeCạnh của một hộp được di chuyển xuống và sang trái.
textCon trỏ văn bản biểu thị văn bản có thể được chọn.
URLCho phép các con trỏ tùy chỉnh từ danh sách URL cách nhau bởi dấu phẩy.
vertical-textHiển thị văn bản dọc có thể được chọn.
w-resizeCho biết cạnh của một hộp sẽ được di chuyển sang trái.
waitGợi ý rằng hệ thống đang bận và người dùng nên chờ.
zoom-inCho biết một cái gì đó có thể được phóng to.
zoom-outCho biết một cái gì đó có thể được thu nhỏ.
initialĐặt lại con trỏ về giá trị ban đầu (mặc định).
inheritCon trỏ được kế thừa từ phần tử cha.

Example: Ví dụ này minh họa việc sử dụng thuộc tính cursor. Giá trị của nó được đặt thành wait, cho biết chương trình đang bận.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title> CSS | cursor property </title>
    <style>
    .wait {
        cursor: wait;
    }
    
    h1 {
        color: green;
    }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p>Mouse over the words to change the mouse cursor.</p>

        <p class="wait">wait</p>

    </center>
</body>
</html>

Output: 

css-cursor-property

Supported Browsers

  • Google Chrome 1.0
  • Microsoft Edge 12.0
  • Mozilla Firefox 1.0
  • IE 4.0
  • Opera 7.0
  • Safari1.2

Note: Hãy nhớ rằng một số phiên bản trình duyệt cũ hơn, đặc biệt là Internet Explorer, có thể không hỗ trợ đầy đủ tất cả các tính năng và thuộc tính CSS hiện đại. Nên kiểm tra tính tương thích trên nhiều phiên bản.


Last Updated : 21/07/2025