Hinzufügen Timer, um Bild bei Hover zu ändern

Question

Also hier ist mein Code und die jsfiddle. Die Effekte funktionieren super, nur dass ich keine Ahnung habe, wie man einen Timer hinzufügt.

z. Wenn jemand über das Bild schwebt, ändert es das Bild nicht sofort. Sie müssen den Cursor 10 Sekunden lang darüber halten, bevor er sich ändert.

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

Dies kann durch Setzen eines timeout in JavaScript erreicht werden.

var timer; 

document.getElementById('img-hover').addEventListener('mouseover', function() { 
    clearTimeout(timer); 
    var elem = this; 
    timer = setTimeout(function() { 
     elem.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-images-content.png'; 
    }, 1000); 
}); 

document.getElementById('img-hover').addEventListener('mouseout', function() { 
    clearTimeout(timer); 
    var elem = this; 
    timer = setTimeout(function() { 
     elem.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png'; 
    }, 1000); 
}); 

Sie müssen auch eine ID enthalten und die Inline-Click-Ereignisse in Ihrem HTML entfernen, so sollte es sein:

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

JSFiddle

Beachten Sie, dass in der JSFiddle, ich habe muss die Bilder ändern, damit ich sie tatsächlich sehen kann :)

Answer 2

Sie könnten setTimeout() Funktion von Javascript verwenden, um Ihre Sache

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

Hinweis zu tun, dass this.src nicht mehr funktionieren kann.

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

Answer 3

Sie möchten wahrscheinlich setTimeout

betrachten

<a href="https://www.google.com/"> 
    <img src="chromeextension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png" onmouseover="setTimeout(function() { this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-images-content.png'}, 10000)" onmouseout="this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png'" /> 
</a>