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