URL của con trỏ có liên quan đến tệp css không?

Question

Tôi biết đường dẫn được cho là liên quan đến tệp css, nhưng điều đó dường như không phải là trường hợp cho hình ảnh mà tôi đang cố gắng sử dụng làm con trỏ.

Cấu trúc tập tin là:

Content/Site.css 
Content/images/butteryfly.ani 
Content/images/user.png 

Site.css:

.butterfly 
{  
cursor: url('images/butterfly.ani'), pointer;  
} 

/*this works*/ 
.ui-icon-user 
{ 
    background-image: url(images/user.png) !important; 
    background-position: 0 0; 
} 

Nó hoạt động nếu tôi thay đổi nó để:

.butterfly 
{  
cursor: url('Content/images/butterfly.ani'), pointer;  
} 

Tại sao không phải là công việc URL có liên quan cho con trỏ?

Chỉnh sửa: Không hoạt động trong Chrome, Firefox hoặc IE9. Trong tất cả các trình duyệt, nó sẽ hiển thị con trỏ tay thay vì con trỏ tùy chỉnh.

Chỉnh sửa2: Để theo dõi: làm cách nào để tôi thực sự làm việc này trên trang web của mình, vì các trang html ở các cấp khác nhau? Có cách nào để xác định một URL tương đối bằng cách nào đó trong css hoặc tôi nên chỉ cần đặt một bản sao của con trỏ ở cấp độ tương tự như mỗi trang (mà sucks!)?

Answer 1

Bạn nên sử dụng phần mở rộng .cur để làm cho nó hoạt động cả trong IE và FF. Và trong IE11 và trước đó URL đến tệp con trỏ có liên quan đến trang không phải tệp css.

cursor: url('http://example.com/Content/images/butteryfly.cur'), default; 

Cố gắng tránh sử dụng hai giá trị url vì kết quả là một lần truy cập không cần thiết tới máy chủ của IE. Thay vào đó, hãy sử dụng URL tuyệt đối sẽ hoạt động tốt trong IE, FF và Chrome. Opera sẽ sử dụng mặc định.

Answer 2

Tôi chỉ biết rằng Internet Explorer diễn giải các URL tương đối liên quan đến tài liệu HTML, nhưng các trình duyệt hiện đại (Mozilla Firefox, Google Chrome) giải thích các URL tương đối so với ".css".

/* 
The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS  file 
*/ 

#example { 
    cursor: url('arrow.cur'),   /* Modern browsers */ 
      url('style/arrow.cur'),  /* Internet Explorer */ 
      default; 
}  

Answer 3

Tôi khuyên bạn nên đọc bài viết ngắn này. http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/

Có 3 cách giải quyết cho lỗi IE - IE không giải thích URL con trỏ tùy chỉnh là tương đối. Các loại URL được giải thích một cách chính xác trong IE

1. sử dụng đường dẫn tuyệt đối
2. di chuyển con trỏ phong cách trong trang html giữa các thẻ
3. sử dụng IE bình luận có điều kiện, tương tự như các giải pháp được cung cấp bởi John C.