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

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

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

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

2 个答案: