Warum ändert sich dieses Bild nicht, wenn Sie die Maus über this.src bewegen?

Question

Ich bin ratlos. Ich habe keine Ahnung, warum das die Bildquelle bei Mouse Over nicht ändert ... Ich habe eine separate Testseite erstellt und das kein Problem, aber es geht nicht mit meiner eigentlichen Div-Seite ...

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

Ich hatte tatsächlich arbeiten hinzuzufügen:

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

diese Arbeit zu bekommen.

Ich hatte gedacht, dass Mahesh hatte Recht, aber sobald ich die <td> Tags aus dem IMG entfernte, funktionierte es perfekt in der Größe, die es war.

Ich schätze der IMG war nur hinter der <td> Zelle. Das Bild war etwas, das ich vergessen hatte zu posten, ich hatte keine Position angegeben.

Danke für die Hilfe alle!

Answer 2

Wurf in Semikolon, bevor Sie das Skript zu beenden, wie unten gezeigt und es sollte funktionieren.

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

Answer 3

Wenn Ihr Bild nicht geladen wird oder die Größe des Bildes ist zu klein, um ein Ereignis zu erkennen, Mouseover, wird es die mouseout Veranstaltung auch Feuer.

Ihr Code sieht gut aus, nur etwas Höhe und Breite zum Bild hinzufügen.

Feedle zeigt Beispiel derselben

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