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

Question

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

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

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

Answer 1

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

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

Answer 2

尝试改用 setAttribute，当我这样做时，这有效。

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

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

Why is mouseover function not working

html

javascript

image

mouseover