apply javascript functions to all objects in a css class

Question

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?

Answer 1

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

Answer 2

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