​​イメージの上を浮遊するときに背景色を変更する

Question

トピックで説明されている機能を探しています。ユーザーがイメージ（id = "sie"）の上を移動すると、テーブルセルの背景（id = "sein_img"）が変更されます。私はこのコードを使ってみましたが、なぜ動作しないのか分かりません。ヘルプは非常に高く評価されるだろう！

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

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

<img id="sein_img" src="images/stories/bullet_white.png" /> 

Answer 1

あなたのスクリプトが完全に正常に動作しますが、あなたは（あなたのケースID sein_imgと<div>に）影響を受けたHTMLタグの初期化後<script>を実行している場合のみ。要素がマウスオーバーリスナーが要素に設定されていないので、まだ利用できない（あなたがdocument.getElementById()で取得要素がundefinedある

だから、あなたはこれらの2つのオプションのどちらかを選択することができ、あなたの問題解決に：。

を
1. <script>タグをページの下部に移動するか、少なくともリスナーを設定する最後の要素の後ろに移動します。
2. リスナーを要素に設定する前に、ドキュメントの準備が整うまで待ちます。 jQuery（$(document).ready(function() { ... });）

Answer 2

htmlのレンダリング後にスクリプトを実行して実行します。私はそれが有効なhtmlテーブルでのみ動作すると思います。

<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

htmlコードの後に​​<script />と記述する必要があります。 this plunkerを確認することができます。

Answer 4

問題がある：

1. あなたは自分の作成前の要素にアクセスしています。
2. td要素をテーブル要素に配置する必要があります。そうしないと、その属性は解釈されません（この場合はIDとスタイル）。

<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>

あなただけのコードが動作しません本体の底部にタグを置く場合。

<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>