Почему это изображение не меняется при использовании этого.src?

Question

Я в тупике. Я понятия не имею, почему это не изменит источник изображения при наведении мыши ... Я создал отдельную тестовую страницу, и это не проблема, но она не будет работать с моей фактической страницей div ...

HTML

<div id="nav"> 
    <div id="nav_left"> 
     <table class="nav_left"> 
      <tr><td> 
       <img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png'" onmouseout="this.src='arrowdown.png'"/> 
      </td></tr> 
     </table> 

CSS

#nav { 
    background-color: #272729; 
    width: 99%; 
    margin: 0 auto; 
    height: 55px; 
} 

#nav_left { 
    width: 30%; 
    display: inline-block; 
    height: 55px; 
} 
table.nav_left { 
    padding: 0; 
    margin: 0; 
    border-right: 1px solid black; 
    height: 55px; 
    width: 10%; 
    text-align: center; 
    float: left; 
    margin-right: 1em; 
} 

Answer 1

Я на самом деле пришлось добавить:

img { 
    position: relative; 
    z-index: 1000; 
} 

, чтобы получить эту работу.

Я думал, что Махеш прав, но как только я удалил теги <td> из img, он отлично работал с размером, на котором он был.

Я предполагаю, что img был только за ячейкой <td>. Img css был чем-то, что я забыл опубликовать, я не указал позицию.

Спасибо за помощь всем!

Answer 2

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

<img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>

Answer 3

Если изображение не загружается или размер изображения слишком мал, чтобы признать события наведения мыши, он будет срабатывать событие MouseOut, а также.

Ваш код выглядит прекрасно, просто добавьте высоту и ширину в изображение.

Feedle показывает рабочий пример того же

<img style="height:100px; width:100px;" src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>