Thursday, December 12, 2013

Các thuộc tính con trỏ chuột trong CSS

Thuộc tính trỏ chuột quyết định cách hiển thị của con trỏ khi 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:

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}

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, FireFox, Opera, Safari và IE đề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.

Hãy thử di chuyển vào hộp này xem như thế nào. Bạn sẽ thấy mũi tên màu xanh.

Code mẫu:

cursor: url(images/my-cursor.png), auto;

No comments:

Post a Comment