javascript - 添加计时器以在悬停时更改图像

Question

这是我的代码和 jsfiddle .效果很好，唯一的问题是我不知道如何给它添加一个计时器。

例如当有人将鼠标悬停在图像上时，它不会立即更改图像。您必须将光标放在它上面 10 秒钟，它才会发生变化。

HTML

<a href="https://www.google.com/"><img src="chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png" onmouseover="this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-images-content.png'" onmouseout="this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png'" /></a>

Answer 1

你可以使用 Javascript 中的 setTimeout() 函数来做你的事情

onmouseover="window.setTimeout(function(){  document.getElementById('image1').src='http://www.w3schools.com/css/img_fjords.jpg'
},1000);"

请注意，this.src 可能不再有效。

https://jsfiddle.net/BoyWithSilverWings/dgvtvvj0/3/