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:

$('*').hover(
 function() {
  $(this).addClass('hover');
 },
 function() {
  $(this).removeClass('hover');
 }
);

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.

OOPS!

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!



11 comments:

Anonymous said...

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

$(this).addClass('hover');

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...

@Shadowfiend
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...

@Karl
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!

Life Experience Degrees Accredited said...

The Jquery class was amazing. I saw your online lectures and have also read your pdf files of lectures you do make the things easier to understand. I was not getting the information. You have done a great job. However, there are still some points missing that i was searching, hoping to see them in your future lectures.

Coursework Club help and writing services said...

Jquery is really great and I didn't use jquey before but loved to use in the future. My teacher of Coursework club help taught me a bit about Jquery but he didn't tell me that I can add Hover class to anything in Jquery.

Lisa Maria said...

I think we all know that how difficult is now to do your coursework, assignment or thesis. Coursework Writing