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!

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 

Anonymous said...

We’ve taken a lot of the guesswork out of choosing an excellent router at a low price by providing you with a list of ten of the best routers under $100. Any one of these routers is a fantastic choice for home or small office use.

KellieWilliams said...

your tool or a computer, you will still need to change the prior to riding on to Gondor on his unicorn. Regardless.

Huong Nguyen said...

http flowers là shop hoa tươi chuyên cung cấp các sản phẩm hoa tang lễ đẹp tại tphcm. Khác hàng muốn mua hoa tang lễ hãy truy cập vào link

Jessica Jack said...

I am not a professional developer or designer but I can do these both things on beginner level. I am a passionate Assignment Writer and I do freelance job with PhD writers in UK. I am running my blog on “College Life” and I was looking for these code to add hover by using jquery and finally I got it here.