Jul
03
2009

A Simple Mouseover Hover Effect with jQuery

by   |  Posted in Tutorials  |  51 comments

JavaScript is pretty useful but it does demand a lot of coding. Luckily for all of us, there are libraries out there that make it extremely easy to use the power of JavaScript with a lot less code. I have been having a lot of fun with jQuery latetly and wanted to share a quick and easy tutorial on how to create a mouseover hover effect.

A similar effect can be easily accomplished using CSS and the :hover selector, but if you are new to jQuery, this tutorial is a good starting off point to familiarize yourself with how it works.

First you need to download jQuery. Grab the Production minified version off of their site. You will also need two images. I used the two below. I named them button.png and button-hover.png.

bavota-bwbavota

Now we can start to create the effect.

To make it all work, we first need to add the jQuery library script between the <head> tags.

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

Now lets create the function that will make it all work.

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

Last but not least, we need to add our image to the page.

<img src="button.png" alt="My button" class="button" />

The one thing you need to make sure is that the classname in the jQuery function (.button) matches the classname of the image tag (button).

With everything in place you should have a file that looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
	$(".button").hover(function() {
		$(this).attr("src","button-hover.png");
			}, function() {
		$(this).attr("src","button.png");
	});
});
</script>
</head>
 
<body>
<img src="button.png" alt="My button" class="button" />
</body>
</html>

Try out the effect below.

bavota-bw

NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
Share the love...

Tags: , , ,

Short URL: http://bit.ly/aVtQ1r

Discussion 51 Comments

← Older Comments
  1. Niek on January 13, 2011 at 2:41 pm

    Didn’t read the comments but this is simply done with a css sprite. So in my eyes a waste of a post :s

    • c.bavota on January 14, 2011 at 12:16 pm

      Thanks for the words of encouragement. I wrote this post as a precursor to another post that took it to the next level and incorporated some animation. So this one is more of an introduction on how to start messing around with jQuery.

  2. gtagamer on January 21, 2011 at 8:08 am

    awesome script, very helpful.

  3. Lisa on February 12, 2011 at 6:27 am

    if we dont need any animation on hover then js should never be used. this can be simply done with CSS. but for any effect yes jQuery is necessary.

  4. Web Dev Rob on February 17, 2011 at 5:48 am

    It’s a good article, well writtem, but for soemthing so simple JavaScript really isn’t the right choice here :)

    Granted, if it’s just the hover effect for a logo from greyscale to color, it won’t be the end of the world if that doesn’t work :)

    • c.bavota on February 17, 2011 at 9:59 am

      I agree, but this tutorial is suppose to be a starting point for people who are unfamiliar with jQuery. It leads up to this tutorial: http://bit.ly/bETRnX

  5. Mike on February 19, 2011 at 12:32 pm

    Always good to see tutorials, but this is a demo of exactly how javascript should not be used.

    Absolutely no reason not to use css hover and possibly sprites.

    This could serve as a learning tutorial for someone learning js / jquery. However, it is important they know the css method first.

    • c.bavota on February 19, 2011 at 1:26 pm

      I totally agree, and like I mentioned in the comment above yours, this was a starting point tutorial leading up the the fade effect in the next tutorial.

  6. holly on February 23, 2011 at 7:20 pm

    i love it it worked for me! thank you!

  7. Jorgen on March 7, 2011 at 10:59 am

    jQuery should be cross browser compatible yes, but javascript in general is not, Bavotasan :-)

  8. keyuri on April 13, 2011 at 2:41 am

    nice article

    thanks for shar

  9. Viet on April 13, 2011 at 1:51 pm

    Thanks for your useful article.

  10. Klevis Miho on April 14, 2011 at 9:19 am

    Thank you, exactly what I needed.

  11. zaz on May 17, 2011 at 1:10 pm

    Hello fello Mtl-er
    Just found your site just now, so I was wondering …
    Can u point out some jQry code to stop all this raining?
    Where has the spring gone, anyway?

← Older Comments