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>（在您的情况下为<div>且标识为sein_img）。该元素尚不可用，因此鼠标悬停监听器未设置为元素（document.getElementById()获得的元素为undefined。

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

将您的<script>标记移至页面底部，或至少在您要设置收听者的最后一个元素之后移动。
在将侦听器设置为元素之前，请等待文档准备就绪。你可以，例如用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

问题是：

您正在创建元素之前访问它们。
您必须将 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>

将鼠标悬停在图像上时更改背景颜色

4 个答案: