Ändern Hintergrundfarbe beim Schweben über ein Bild

Question

Ich bin auf der Suche nach der Funktionalität im Thema beschrieben. Wenn der Benutzer über ein Bild fährt (id = "sie"), sollte sich der Hintergrund einer Tabellenzelle (id = "sein_img") ändern. Ich habe versucht, diesen Code zu verwenden, aber ich bin mir nicht sicher, warum es nicht funktioniert. Hilfe wäre sehr willkommen!

Answer 1

Ihr Skript funktioniert völlig in Ordnung, aber nur, wenn Sie die <script> nach der Initialisierung der betroffenen HTML-Tags (in Ihrem Fall der <div> mit der ID sein_img) auszuführen. Das Element ist noch nicht verfügbar, so dass der Mouseover-Hörer auf das Element nicht gesetzt ist (das Element, das Sie bekommen mit document.getElementById() ist undefined

, also Ihr Problem zu lösen, die Sie zwischen diesen zwei Möglichkeiten wählen:.

1. Verschieben Sie Ihr <script>-Tag an den unteren Rand der Seite oder mindestens nach dem letzten Element, dem Sie einen Listener zuweisen möchten
2. Warten Sie, bis das Dokument fertig ist, bevor Sie einen Listener auf ein Element setzen jQuery

Answer 2

Verschieben Sie das Skript zum Ausführen nach dem Rendern Ihres HTML. Ich denke, es wird auch nur mit einer gültigen HTML-Tabelle funktionieren.

<table><tr><td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td></tr></table> 

<script type="text/javascript"> 
     document.getElementById("sein_img").onmouseover = function() { 
      document.getElementById("sie").style.backgroundColor = "red"; 
     } 
</script> 

Answer 3

Sie müssen diese <script /> nach den HTML-Codes schreiben. Sie können this plunker überprüfen.

Answer 4

Das Problem ist:

1. Sie sind die Elemente vor ihrer Entstehung zugreifen.
2. Sie müssen das td Element in ein Tabelle Element setzen sonst werden seine Attribute nicht interpretiert (in diesem Fall die ID und Stil).

<table> 
 
    <td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td> 
 
</table> 
 
<img id="sein_img" src="images/stories/bullet_white.png" /> 
 
<script type="text/javascript"> 
 
    document.getElementById("sein_img").onmouseover = function() { 
 
    document.getElementById("sie").style.backgroundColor = "red"; 
 
    } 
 
</script>

Wenn Sie nur den Code funktioniert nicht den Tag in der Unterseite des Körpers gelegt.

<td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td> 
 
<img id="sein_img" src="images/stories/bullet_white.png" /> 
 
<script type="text/javascript"> 
 
    document.getElementById("sein_img").onmouseover = function() { 
 
     document.getElementById("sie").style.backgroundColor = "red"; 
 
    } 
 
</script>