jMar"s Blog DevSmash Developer Portal

Friday, April 18, 2008

Add Hover Class to Anything in jQuery

Well I've been feeling a little guilty for the relative sparsity of my posts lately (not that I don't have a good excuse or two), but I wanted to at least get on here and share a quick little tip.

One of the most fundamental "effects" employed by CSS designers is that of indicating when an anchor tag is being "hovered". Virtually every CSS file you encounter will contain something like the following:

a:link {
 /* default styles for anchors */

a:hover {
 /* styles for hovered anchors */

Often times, however, this same effect is desirable for non-anchor elements as well. For example, in my applications, I like to visually indicate anything that can be the target of an onclick event - and practically speaking, that's not always an anchor. The problem is that :hover is not a reliable cross-browser pseudo-selector on non-anchor elements. Can anyone guess which clIEnt I'm talking about?

Well fret not, cause we have JavaScript to the rescue. In this particular example, as usual, I'm using jQuery to make life easy. Since we can't rely on :hover, we're going to dynamically add a class of hover via JavaScript. The code to do this is remarkably simple:

 function() {
 function() {

Now let's say you want to style a div with class iHoverable differently when it's being hovered. You can simply add the following rule to your style sheet:

.iHoverable {
 /* normal styles for this element */
.iHoverable.hover {
 /* styles for hover effect */

That's almost it - just a quick note from a practicality standpoint. I don't really recommend using $('*').hover(...) from the code above. If you already know that you only need to style hovers for elements of class iHoverable, then it would be more efficient to simply write $('.iHoverable').hover(...)

Kapeesh? Ok, now that's it.


It has come to my attention that this post is remarkably similar to a previous post by Karl Swedburg from over a year ago. My bad!


Anonymous said...

Sorry, I am a bit new to jquery and web development altogether. How is:


related to:

# .iHoverable?

Shouldn't it be $(this).addClass('iHoverable');

Jeremy Martin said...

No... I'm afraid I made the class names a little confusing. In this example, you would have some divs in your page with class "iHoverable". Now let's say we execute the script ONLY on elements with class iHoverable. The script would start off like this:

# $('.iHoverable').hover(

This loops through each instance of .iHoverable, and tells that element to add a class of "hover" when the mouseover event fires, and to remove the class of "hover" when the mouseleave event fires.

That's why, in the last CSS example, you can add styles that are only applied while it is "hovered" by using the following selector: .iHoverable.hover.

Does that make more sense now?

Anonymous said...

No, I understand

Shadowfiend said...

A more efficient way of doing this would be to add a hover event to the document body and then assign the class on the target element (which you can get from the event object your handler is passed). This way, only one element has the event handler assigned to it. To avoid having that event fire, you can cancel the event bubble in event handlers for child elements.

Jeremy Martin said...

Thanks for the tip - that definitely does seem like a better approach.

Karl said...

Hi Jeremy,

Glad to see you spreading the word on how easy it is to use jQuery for things like this. Reminds me of an entry I wrote last year: Quick Tip: Set Hover Class for Anything. :)

Jeremy Martin said...

Hey thanks for commenting - and sorry about that! I'm afraid that post was before I even heard of jQuery or your site, and apparently failed to google it :p

pixart said...

Wow thats so simple and great way to change classes, thanks!