CSS tùy chỉnh con trỏ không hoạt động trong FF/Chrome

tôi đang cố gắng để tạo ra một con trỏ tùy chỉnh bằng cách sử dụng hình ảnh sau đây:CSS tùy chỉnh con trỏ không hoạt động trong FF/Chrome

http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png

Kích thước hình ảnh phải được giữ lại. Tôi đã thử chỉ đơn giản là sử dụng body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, mặc dù điều đó không hoạt động trong FF/Chrome. (thậm chí không kiểm tra các trình duyệt khác)

Lý do khiến nó không hoạt động là gì?

Nguồn

2011-07-08 Gajus

Vấn đề là không chỉ với mã css của bạn thiếu đối số thứ hai nhưng với các tập tin hình ảnh .

Nếu bạn chỉ cần thay đổi kích cỡ, hãy làm cho nó nhỏ hơn (tôi đã thử 32px cho mục đích thử nghiệm) nó hoạt động như một sự quyến rũ.

Bạn cũng có thể muốn "con trỏ" thay vì tự động, đánh giá bằng giao diện của hình ảnh;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

EDIT: tôi nhận ra bây giờ bạn muốn giữ kích thước nhưng nó sẽ không hoạt động. xem https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property để biết thêm thông tin

Nguồn

2011-07-08 11:47:03 xec

"Trong Gecko (Firefox) giới hạn kích thước con trỏ là 128 × 128px. Hình ảnh con trỏ lớn hơn bị bỏ qua". (https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property) – Gajus

Quirksmode nói rằng giới hạn là 32x32 và đây là hạn chế của Windows, không phải là hạn chế trình duyệt. – Spudley

'name =" "&& ext =" "&& sudo apt-get cài đặt imagemagick && chuyển đổi" $ name "." $ Ext "-resize 32x" $ name "-small." $ Ext "' –

Firefox đòi hỏi một lập luận phi url thứ hai như

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;

Có một tài liệu tham khảo tuyệt vời tại Quirksmode CSS2 - Cursor Styles

Nguồn

2011-07-08 11:32:23 detaylor

Tôi nên đề cập, nhưng tôi cũng đã thử điều đó và nó không hoạt động. Demo có sẵn http://anuary.com/dev/hp/pad3/. – Gajus

Bạn đang sử dụng phiên bản FireFox nào? Nó hoạt động tốt cho tôi - giả sử rằng bạn sẽ thấy một bàn tay khổng lồ khi bạn di chuột qua hộp đen. Bài viết của Quirksmode đề cập rằng hình ảnh phải nhỏ hơn 32x32px mà hình ảnh trong bản demo không có vẻ như vậy. – detaylor

@Guy: Hoạt động tốt nhất trong FF5; không hoạt động trong Opera 11 hoặc IE8 (tôi nhận con trỏ "con trỏ" thông thường). Lưu ý rằng vị trí chuột ở tọa độ con trỏ (0,0) - tức là hàng chục pixel ở bên trái của "ngón trỏ"; trừ khi mục tiêu nhấp chuột của bạn tương xứng với kích thước của con trỏ, điều này sẽ khiến người dùng của bạn hiểu sai rất nhiều ("ngón tay đó * có *, nhưng nó nhấp * ở đó *, chuột của tôi có bị hỏng không?"). – Piskvor

CSS tùy chỉnh con trỏ không hoạt động trong FF/Chrome

Trả lời

Các vấn đề liên quan