Change image on mouse hover effect with jquery

Home / JQuery / 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.

Related Posts

2 Comments

  • It’s the best time to make some plans for the longer term and it is time to be happy. I’ve read this put up and if I may just I desire to recommend you some attention-grabbing things or tips. Maybe you could write next articles relating to this article. I wish to read even more issues approximately it!

  • Johna206

    I am just seeming both for blog sites which give independent, nutritious commentary on all difficulties or blogging sites which have a liberal or droppedwing slant. Thank you..

Leave a Reply

Your email address will not be published. Required fields are marked *