this.style.cursor = 'hand', не работает в первый раз, когда я наводил указатель мыши на элемент

Question

Я новичок в программировании. Все, что я пытался, это изменить стиль курсора на руку onmouseover событие. когда я запускаю страницу в первый раз, она меняет стиль границы, но стиль курсора не изменяется, но когда я перемещаю курсор на элемент изображения во второй раз, все работает так, как ожидалось. может кто-нибудь объяснить, что является точной причиной этого неправильного поведения и как я могу заставить его работать.

Примечание:
Я пытался реализовать это в asp.net страниц контента: P, так что я считаю, что это легкий путь вместо того, чтобы поддерживать отдельный CSS файл

<img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" /> 


<script> 
    img.onmouseover = function() { 
     this.style.cursor = 'hand'; 
     this.style.border = "2px solid black" 
    } 
    img.onmouseout = function() { 
     this.style.cursor = 'pointer'; 
     this.style.border = "2px solid white" 
    } 
</script> 

Answer 1

Я знаю, как реализовать это в css, я пытался откопать, если есть возможность реализовать это в javascript.

Ну, это была важная информация для включения в вопрос.

Две вещи:

1. Вы должны использовать правильный CSS cursor property values, hand не является допустимым значением.

2. Необходимо, чтобы код после Изображение существует. Самый простой способ сделать это - поместить свой тег script в конец вашего HTML, непосредственно перед закрывающим тегом </body>.

Если вы делаете это, оно работает. Конечно, изображение перемещается, потому что он изначально не имеют границ:

img.onmouseover = function() { 
 
    this.style.cursor = 'pointer'; 
 
    this.style.border = "2px solid black"; 
 
} 
 
img.onmouseout = function() { 
 
    this.style.cursor = 'default'; 
 
    this.style.border = "2px solid white"; 
 
}

<img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" />

Я не рекомендую полагаться на автоматическом глобальном (созданный, потому что у вас есть id="img"), но он работает.

---

Как kaiido points out, мы могли бы просто установить cursor свойство один раз, а не в обработчики событий, так как оно применяется только тогда, когда курсор находится в любом случае зависания элемент:

img.style.cursor = 'pointer'; 
 
img.onmouseover = function() { 
 
    this.style.border = "2px solid black"; 
 
} 
 
img.onmouseout = function() { 
 
    this.style.border = "2px solid white"; 
 
}

<img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" />

Answer 2

Попробуйте использовать CSS вместо JavaScript. Если вы хотите сделать это в том же файле, используйте style элемент:

<style> 
#img { 
    border: 2px solid white; 
} 
#img:hover{ 
    cursor: pointer ; 
    border: 2px solid black; 
} 
</style> 

Это дает изображение белой каймой нормально (курсор по умолчанию), а затем меняет его на черный с указателем курсора при наведении курсора мыши над элементом.