Learning jQuery

Sometimes it's nice to be able to give users visual feedback when they hover their mouse over an element on the page. It's easy to do, of course, with a little CSS:

#hover-demo1 p:hover { background: #ff0; }

That little style rule changes the background of any paragraph that is a descendant of an element with id="hover-demo" to a nice bright yellow — but only when you hover your mouse over it. So, if that's all there is to it, what does this have to do with jQuery?

Unfortunately, (yep, you guessed it) Internet Explorer 6 and below don't support the :hover pseudo-class on any element except <a>. Bummer!

See for yourself here:

We could just leave it alone at this point and figure that people using real browsers will be rewarded with a little extra eye candy. On the other hand, maybe the right thing to do is to have mercy on the downtrodden. After all, even IE 6 users arguably have some aesthetic sense.

Enter jQuery

With a few lines of jQuery (one line, actually, if you don't care about making it readable) we can provide the hover effect to those using IE 6 or below, as long as they have JavaScript enabled. We also might as well keep the CSS rule in the stylesheet. Now, the only people who won't see the hover state change are those using Internet Explorer 6 (or below) with JavaScript off. Well, if they're using any browser with JavaScript and CSS turned off, they won't see it either. But that sort of folk ain't hankerin' for the eye candy anyway.

First, we give a simple class the same background as the aforementioned :hover pseudo-class:

.pretty-hover, #hover-demo1 p:hover {
  background: #ff0;
}

Next, we use jQuery to add class="pretty-hover" to each paragraph when the user hovers over it:

[js]$('#hover-demo2 p').hover(function() { $(this).addClass('pretty-hover'); }, function() { $(this).removeClass('pretty-hover'); });[/js]

Note: We switched to a different id here so that IE 6 users can see the difference between the two hover demos, but the idea is that you would use the .hover() method on the same elements that you applied the :hover pseudo-class to.

That's it! Give it a whirl:

Try it with Firefox, Safari, or Internet Explorer. Try it with any browser you wish (within reason) — and you should see the yellow.

Bonus!

If you'd like to replicate the look of a hovered link, you can add another CSS declaration to the "pretty-hover" class:

.pretty-hover {
  background: #fee;
  cursor: pointer;
}

That'll work nicely for showing and hiding effects triggered by clicking on elements other than <a>.