jQuery Hover Image Replace, Replace Image on Hover

jQuery hover image replace, jQuery Hover Function, Replace Image on Hover

Tweet
Share
Share
Pin

This is a working demo to replace image on hover using the jQuery hover function. This function will help you save time on replacing image on hover.

<img src="https://placehold.it/250/dddddd/000000" data-offhover="http://placehold.it/250/dddddd/000000" data-hover="http://placehold.it/250/000000/ffffff" class="hoverItem">
<script type="text/javascript">
	$( document ).ready(function() {
    	$(".hoverItem").hover( function () {
    		$this = $(this);
		  	var on = $this.attr('data-hover');
		  	$this.attr('src', on);
		}, function() {
			var off = $this.attr('data-offhover');
		  	$this.attr('src', off);
		});
	});
</script>

View Demo

GitHub Files