CSS - Cursor Property: Mastering Mouse Pointer Styles

Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của thuộc tính cursor trong CSS. Là người thầy máy tính gần gũi của bạn, tôi sẽ dẫn dắt các bạn qua hành trình này với nhiều ví dụ và một chút hài hước. Hãy lấy con chuột ảo của bạn, và chúng ta cùng bắt đầu nhé!

What is the CSS Cursor Property?

Trước khi chúng ta đi vào chi tiết, hãy hiểu thuộc tính cursor làm gì. Nói đơn giản, nó cho phép bạn thay đổi ngoại hình của con trỏ chuột khi nó di chuột qua một phần tử trên trang web của bạn. Đó là như cho con chuột của bạn một diện mạo mới cho các phần khác nhau của trang web!

Possible Values

Thuộc tính cursor trong CSS cung cấp một loạt các giá trị để bạn chọn. Hãy cùng xem xét một số giá trị phổ biến nhất:

Value	Description
auto	Trình duyệt xác định con trỏ
default	Con trỏ mặc định (thường là mũi tên)
pointer	Con trỏ chỉ
text	Con trỏ chọn văn bản
wait	Con trỏ chờ (thường là cốc giờ)
help	Con trỏ trợ giúp (thường là dấu hỏi)
move	Con trỏ di chuyển
crosshair	Con trỏ十字线
not-allowed	Con trỏ không cho phép

Và còn nhiều hơn nữa! Chúng ta sẽ khám phá một số trong số này trong các ví dụ của mình.

Applies to

Thuộc tính cursor có thể được áp dụng cho bất kỳ phần tử HTML nào. Điều này có nghĩa là bạn có thể thay đổi con trỏ cho toàn bộ các phần của trang hoặc chỉ cho các phần tử cụ thể như nút hoặc liên kết.

DOM Syntax

Khi làm việc với JavaScript, bạn có thể cần truy cập thuộc tính cursor thông qua DOM. Dưới đây là cách bạn có thể làm điều đó:

object.style.cursor = "value"

Ví dụ:

document.getElementById("myButton").style.cursor = "pointer";

Mã này sẽ thay đổi con trỏ thành con trỏ chỉ khi di chuột qua phần tử có ID "myButton".

CSS Cursor - Keyword Value

Hãy bắt đầu với một số ví dụ cơ bản sử dụng các giá trị từ khóa. Dưới đây là một quy tắc CSS thay đổi con trỏ thành con trỏ chỉ khi di chuột qua một nút:

button {
  cursor: pointer;
}

Bây giờ, hãy tạo một ví dụ phức tạp hơn với nhiều phần tử:

<style>
  .text-area { cursor: text; }
  .link { cursor: pointer; }
  .loading { cursor: wait; }
  .locked { cursor: not-allowed; }
</style>

<div class="text-area">Gõ ở đây</div>
<a href="#" class="link">Nhấn vào tôi!</a>
<div class="loading">Đang tải...</div>
<button class="locked" disabled>Không thể nhấn vào này</button>

Trong ví dụ này:

• Vùng văn bản hiển thị con trỏ chọn văn bản
• Liên kết hiển thị con trỏ chỉ
• Phần tử đang tải hiển thị con trỏ chờ
• Nút bị vô hiệu hiển thị con trỏ không cho phép

Nhớ rằng, việc chọn đúng con trỏ có thể cải thiện trải nghiệm người dùng rất nhiều. Đó là như đưa người dùng của bạn những hướng dẫn im lặng về cách tương tác với trang của bạn!

CSS Cursor - Value

Đôi khi, các con trỏ mặc định không đủ. Đó là khi các con trỏ tùy chỉnh đến cứu giúp! Bạn có thể sử dụng một tệp hình ảnh làm con trỏ của bạn. Dưới đây là cách thực hiện:

.custom-cursor {
  cursor: url('path/to/your/cursor.png'), auto;
}

'auto' ở cuối là một备用 trong trường hợp hình ảnh không tải được.

Hãy tạo một ví dụ vui vẻ:

<style>
  .magic-wand {
    cursor: url('magic-wand.png'), auto;
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 200px;
  }
</style>

<div class="magic-wand">Di chuột để thấy phép thuật!</div>

Trong ví dụ này, khi bạn di chuột qua phần tử div, con trỏ của bạn sẽ thành một cây phép thuật! Đó là như biến trang web của bạn thành Hogwarts!

CSS Cursor - Multiple Values

Đôi khi, một con trỏ tùy chỉnh không đủ. Bạn có thể chỉ định nhiều hình ảnh con trỏ làm备用:

.multi-cursor {
  cursor: url('cursor1.png'), url('cursor2.png'), pointer;
}

Điều này đặc biệt hữu ích khi bạn sử dụng các kích thước con trỏ khác nhau cho các độ phân giải màn hình khác nhau:

.responsive-cursor {
  cursor: url('cursor-large.png') 48 48, url('cursor-small.png') 16 16, auto;
}

Các số sau mỗi URL chỉ định các tọa độ x và y của điểm nóng của con trỏ.

Dưới đây là một ví dụ thực tế:

<style>
  .photo-edit {
    cursor: url('brush-large.png') 8 8, url('brush-small.png') 4 4, crosshair;
    width: 300px;
    height: 200px;
    background-color: #e0e0e0;
    text-align: center;
    line-height: 200px;
  }
</style>

<div class="photo-edit">Di chuột để chỉnh sửa</div>

Trong ví dụ này, chúng ta đang mô phỏng một công cụ chỉnh sửa ảnh. Con trỏ thay đổi thành biểu tượng cọ, với备用 cho các kích thước khác nhau và备用 cuối cùng là con trỏ十字线.

Conclusion

Và thế là bạn đã nâng cấp kỹ năng CSS của mình với thuộc tính cursor. Nhớ rằng, con trỏ đúng có thể làm cho trang web của bạn không chỉ hoạt động mà còn trực quan và thú vị để sử dụng. Đó là như đưa người dùng của bạn một cây phép thuật để tương tác với các trang của bạn!

Khi kết thúc, đây là một chút hài hước từ nhà phát triển web: Tại sao nhà phát triển web sử dụng con trỏ 'pointer' trên tất cả các nút của họ? Vì họ muốn làm một 'điểm' về thiết kế UX tốt!

Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy tiếp tục vui vẻ với CSS. Hẹn gặp lại các bạn, chúc các bạn viết mã vui vẻ!

Credits: Image by storyset