改变中 <td> 悬停在图像上时的背景色

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

您的脚本可以正常工作，但是仅当您在受影响的HTML标记初始化后执行<script> （在您的情况下为ID为sein_img的<div> ）。 该元素尚不可用，因此鼠标悬停侦听器未设置为该元素（通过document.getElementById()获得的元素undefined 。

因此，要解决您的问题，您可以选择以下两个选项：

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 /> 。 您可以检查这个矮人 。

Answer 4

问题是：

1. 您正在创建元素之前对其进行访问。
2. 您必须将td元素放在table元素中，否则其属性将不会被解释（在这种情况下，为id和style）。

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