Thuộc tính cursor trong CSS cho phép bạn thay đổi kiểu con trỏ chuột khi người dùng di chuyển chuột qua các phần tử HTML. Việc sử dụng các kiểu con trỏ khác nhau giúp tạo ra trải nghiệm người dùng phong phú hơn và cải thiện tính tương tác của trang web. Bạn có thể điều chỉnh kiểu con trỏ để biểu thị các trạng thái khác nhau, chẳng hạn như khi phần tử có thể nhấp, khi đang tải hoặc khi không cho phép tương tác.

4 Cách Tạo Kiểu Con Trỏ Với CSS

Tạo Con Trỏ Tùy Chỉnh Bằng CSS

Để tăng tính tương tác và giúp giao diện trở nên độc đáo hơn, bạn có thể tạo con trỏ chuột tùy chỉnh bằng cách sử dụng thuộc tính cursor với giá trị là URL của hình ảnh con trỏ. Điều này cho phép bạn thay đổi hoàn toàn hình dạng của con trỏ khi người dùng di chuyển qua phần tử, tạo ra các hiệu ứng hấp dẫn và dễ nhận diện hơn. Ví dụ:

.custom-cursor {

cursor: url('custom-cursor.png'), auto;

}

Trong đó, custom-cursor.png là hình ảnh con trỏ tùy chỉnh mà bạn muốn sử dụng.

Thay Đổi Con Trỏ Thành Pointer

Một trong những kiểu con trỏ phổ biến là pointer, thường được sử dụng khi phần tử có thể nhấp vào, như nút bấm hoặc liên kết. Biểu tượng con trỏ này (hình bàn tay giơ ngón trỏ) giúp người dùng nhận ra rằng phần tử đó có thể tương tác. Ví dụ:

.clickable {

cursor: pointer;

}

Kiểu con trỏ này thường được sử dụng cho các liên kết hoặc các phần tử có sự kiện nhấp chuột.

Ẩn Con Trỏ Chuột Bằng CSS

Đôi khi bạn có thể muốn ẩn con trỏ chuột khỏi người dùng, ví dụ khi phần tử không cho phép tương tác hoặc khi muốn tạo một hiệu ứng đặc biệt. Để làm điều này, bạn có thể sử dụng thuộc tính cursor và đặt giá trị là none:

.no-cursor {

cursor: none;

}

Điều này sẽ khiến con trỏ biến mất khi người dùng di chuột qua phần tử.

Tạo Con Trỏ Chuột Tùy Chỉnh Với JavaScript

Trong một số tình huống phức tạp, bạn có thể cần thay đổi con trỏ chuột dựa trên các hành động của người dùng hoặc thay đổi động từ phía JavaScript. Bạn có thể thay đổi kiểu con trỏ trong thời gian thực bằng cách thao tác với các sự kiện DOM trong JavaScript. Ví dụ:

document.getElementById("myElement").addEventListener("mouseenter", function() {

document.body.style.cursor = "crosshair";

});

document.getElementById("myElement").addEventListener("mouseleave", function() {

document.body.style.cursor = "default";

});

Mã trên thay đổi kiểu con trỏ thành crosshair khi người dùng di chuột qua phần tử và khôi phục lại con trỏ mặc định khi rời đi.

Lợi Ích Khi Sử Dụng Cursor CSS

Cải thiện trải nghiệm người dùng: Việc thay đổi kiểu con trỏ giúp người dùng nhận diện rõ ràng hơn về các phần tử có thể tương tác.

Tính tương tác cao: Các kiểu con trỏ đặc biệt làm cho trang web của bạn trở nên thú vị và tương tác hơn, đồng thời hỗ trợ sự hiểu biết nhanh chóng về hành động người dùng có thể thực hiện.

Tính linh hoạt: CSS và JavaScript cung cấp sự linh hoạt khi thay đổi con trỏ tùy theo nhu cầu cụ thể của trang web và tương tác người dùng.

Với những cách này, bạn có thể dễ dàng điều chỉnh các kiểu con trỏ để phù hợp với mục đích của giao diện người dùng, giúp trang web của bạn trở nên mượt mà và dễ sử dụng hơn.