Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have this code:

$("#SidingPainting").hover(
            function() {
                $(this).addClass("ui-state-hover");
            },
            function() {
                $(this).removeClass("ui-state-hover");
            }
        )

however I have many, like a hundred divs that I want to apply these same functions to!

Is there a way that I could make a css class and apply it to each div and then apply these functions to the css class?

Or any other ideas on how to make my life easier?

share|improve this question
That was a softball. =) – JohnFx Oct 13 '10 at 15:31
I don't get it...? a softball? – kralco626 Oct 15 '10 at 11:23
add comment (requires an account with 50 reputation)

2 Answers

up vote 4 down vote accepted

With jQuery's $ you can use CSS selectors. So just write .className instead of #id

$(".hoverClass").hover(
        function() {
            $(this).addClass("ui-state-hover");
        },
        function() {
            $(this).removeClass("ui-state-hover");
        }
    )

For this you should use the :hover pseudo-class, but IE6 only supports it on the a-tags. So you need a JavaScript fallback like this for it. Detecting IE6 using jQuery.support

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 1 down vote

You don't even need JavaScript if you simply want to change the class on hover. Just give all your divs a common class and use the CSS :hover pseudo-class to change styles on hover:

.SidingPainting { /* this is a class, not an ID */
  ...
}

.SidingPainting:hover {
  ...
}
share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.