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!



19 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!

electronic signatures said...

I have learned so much from your post. I would definitely bookmark your site to be updated with your upcoming articles. Great job! So much information.

James Lackey said...

Thanks for your great information.I have learned to create classes from this blog.It is quite simple and easy to change classes.thanks for sharing.
professional resume writing service

aliya seen said...

I assure you that paraphrasing services will really much helps in the field of education.

Watch Whiskey Tango Foxtrot (2016) Online said...

Interesting and amazing how your post is! It Is Useful and helpful for me That I like it very much, and I am looking forward to Hearing from your next..

Watch London Has Fallen (2016) Online | Watch Zootopia (2016) Online

Annie Gilson said...

Awesome as always! This post contains valuable points and informative very much. I stay tuned to follow you! dubaivfm.com

Deny Games said...

I like this a lot. Thank you for sharing. I'm always looking for upcycles like this. In the end, you don't know it was a shipping pallet to begin with!
bubble shooter
bubble trouble
earn to die
get on top
gunblood
gun mayhem
bloxorz

Inez Shutts said...

Simply want to say your article is as surprising. http://awriter.org/affordablepapers-com-review The clarity on your put up is simply cool and i could suppose you're an expert in this subject http://awriter.org/affordablepapers-com-review.

Katherine Hayden said...

You have shared more efficient way to solve the problem. I am quite impressed with your article. Its as good as always. you tips is really working.
Admission essay writing service

alan said...

examcollection 771-101 Your blog is really awesome. I am very happy to see this. It is totally useful for me. Once again thanks for sharing. examcollection 840-425

Robert Peterson said...

It looks so complicated for mr.. Is it because I'm a girl? Ore because I'm stupid? Or both? nyway, that's time to earn money on http://777spinslot.com/free-slots-no-deposit-win-real-money/ and go to study hard.

Annie Gilson said...

This is a dynamic piece of learning to take pleasure of seeking something new and approachable.
amazon at Joker coat