Как реализовать пользовательский курсор

Question

У меня есть класс, который отвечает за изменение курсора мыши, когда он нависает над определенным элементом. Он принимает строку как параметр, который является относительным путем, где я сохраняю свой пользовательский курсор (например, это .png). Но когда я запускаю веб-сайт, он показывает только обычный указатель. Почему это? Что я здесь делаю неправильно?

Вот код, я работаю с:

 /* 
     * True if the mouse has entered the object 
     */ 
     private _hasEntered: boolean = false; 

     /* 
     * The file name 
     */ 
     private _fileName: string = ""; 

     constructor(fileName: string) { 
      this._fileName = fileName; 
     } 

     /* 
     * Initializes class 
     */ 
     public awake(): void { 
      //...Code to handle mouse enter/exit events goes here 
     } 

     /** 
     * Called when the mouse has entered this object 
     */ 
     private _onMouseEnter(): void { 
      document.body.style.cursor = this._fileName; 
      this._hasEntered = true; 
     } 

Answer 1

имя файла на самом деле URL и должны быть указаны в качестве таковых. Попробуйте

document.body.style.cursor = 'url(' + this._fileName + ')'; 

Answer 2

Прежде всего, вы, как правило, лучше просто установив свойство курсора на деталь парили так:

img.specialpointer { 
    cursor: url(pics/specialcursor.png), auto; 
} 

BTW: это переопределяет поведение, установленное на теле. Я не уверен, что IMG имеет свойство cursor по умолчанию. Если это так, курсор тела игнорируется.

Во-вторых, я не уверен, что вы правильно настроили свойство курсора. Это может быть что-то вроде

document.body.style.cursor = 'url(' + this._fileName + '), auto'; 

В-третьих, реализовать индивидуальные изображения курсора не поддерживаются каждым браузером.