Thuộc tính trỏ chuột quyết định cách hiển thị của con trỏ khi nó di qua một thành phần nào đó.
Thực sự thì đến bài này tôi mới biết là có nhiều hiệu ứng trỏ chuột đến vậy trong CSS.
Bạn muốn biết ngay không, thế thì dưới đây là tên của các thuộc tính đó, bạn cứ di chuột qua từng từ để thấy con trỏ chuột thay đổi như thế nào nhé. Tất nhiên, hiệu ứng con trỏ chuột chỉ thấy rõ trên máy bàn:
auto
alias
crosshair
col-resize
default
e-resize
help
move
n-resize
ne-resize
nw-resize
not-allowed
no-drop
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
w-resize
wait
Code mẫu:
p.wresize {cursor:w-resize}
p.move {cursor:move}
p.wait {cursor:wait}Từng hiệu ứng con trỏ chuột có các ứng dụng thực tế khác nhau, trong đó thường gặp nhất là hiệu ứng pointer, dành cho các nút bấm. Các hiệu ứng resize có thể dành cho các mục nhập cho phép kép giãn, thí dụ như bình luận.
Mẹo bổ sung: với các hiệu ứng CSS ổn định, bạn có thể tách riêng nó ra, và đưa vào một file CSS riêng, để đỡ phải lặp lại nó trên các trang khác nhau.
Các thông số
- Giá trị mặc định: auto
- Tính kế thừa: Có
- Phiên bản CSS: Bắt đầu được đưa vào từ CSS2
- Cú pháp trong JavaScript, ví dụ:
object.style.cursor="crosshair"Trình duyệt hỗ trợ
Tất cả các trình duyệt phổ thông gồm Chrome (5.0), FireFox (4.0), Opera (9.6), Safari (5.0) và IE / Edge (5.5) đều hỗ trợ các thuộc tính liên quan đến con trỏ.
Con trỏ chuột là ảnh
Cũng thú vị khi biết rằng bạn có thể quyết định con trỏ xuất hiện như là một ảnh bất kỳ mà bạn muốn.
Code mẫu:
cursor: url(images/my-cursor.png), auto;