@public #js #javascript #hover #image #jquery

This is how to change an Image src on Mouse hover with jQuery

HTML

<img src="url1.jpg" data-alt-src="url-2.jpg" class="hover_images"/>
...
<img src="url3.jpg" data-alt-src="url-4.jpg" class="hover_images"/>
...
<img src="url5.jpg" data-alt-src="url-6.jpg" class="hover_images"/>

Javascript

$('.hover_images').hover(function(){
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
});
/** Big Thank to http://stackoverflow.com/a/17507894 **/

Here is a demo