Change image on mouse hover effect with jquery

This is possible to many way change image on mouse hover effect like javascript. But it will take time and much coding compare to do with jquery. This is very easy to make mouse hover effect with jquery.

How to change image mouse over effect with jquery

we first need to add the jquery library script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<img src="logo.png" alt="juswebdevelopment" class="logo" />

This is jquery function for shows change hover effect

<script  type='text/javascript'>
$(document).ready(function(){
	$(".logo").hover(
		function() {$(this).attr("src","logo-hover.png");}, 
		function() {$(this).attr("src","logo.png");
	});
});
</script>

This function is working with image class=”logo”. When mouse hover on class logo that time its call this function and change the image as per code.

Comments

comments