Javascript 为什么鼠标悬停功能不起作用

我有最简单的代码，但我以前从未尝试过使用onmouseover，因此不确定它为什么不起作用：

<div class="play" id="buttonPlay">
    <img src="Buttons/Play/playRest.png" onmouseover="this.src='Buttons/Play/playClick.png'" width="100%"> 
</div>

---

有什么想法吗？调试它的好方法是什么？

试着在脚本元素中声明函数并引用该函数，而不是内联执行。至少这样，您可以在浏览器的开发人员控制台中设置断点，并查看发生了什么

<div class="play" id="buttonPlay">
    <img src="Buttons/Play/playRest.png" onmouseover="myFunction(this)" width="100%"> 
</div>
<script>
    function myFunction(element) {
        element.src='Buttons/Play/playClick.png';
    }
</script>

函数myFunction（元素）{
element.src='Buttons/Play/playClick.png'；
}

试着改用setAttribute，当我这样做时，效果会很好

<div class="play" id="buttonPlay">
    <img src="Buttons/Play/playRest.png" onmouseover="this.setAttribute('src', 'Buttons/Play/playClick.png');" width="100%"> 
</div>

我复制了代码，替换为

警报（）

，警报显示，因此它应该正在运行。并查看错误消息。定义“不工作”。是否用损坏的图像替换图像？控制台中是否显示错误消息？难道什么都没发生吗？那代码真的再现了问题吗？或者它只在（例如）添加其他HTML元素和CSS时发生？不，它根本不起作用。控制台上没有错误。我还尝试用alert（）替换，但仍然没有。重新编辑：现在您没有破坏它，但似乎还没有解决问题。您只是建议进行一系列调试。（通过将

调试器；

前置到

onmouseover

属性值来设置断点会更容易）@Quentin你说得对，我编辑了它，但它不是一个解决方案，只是一种方便调试的方法。