将javascript函数应用于css类中的所有对象

Question

我有这段代码：

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

但是我有很多，就像一百个div，我想将这些相同的功能应用到！

有没有办法可以创建一个css类并将其应用于每个div然后将这些函数应用于css类？

关于如何让我的生活更轻松的任何其他想法？

Answer 1

使用jQuery的$，您可以使用CSS选择器。所以只需写.className而不是#id

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

为此，您应该使用:hover伪类，但IE6仅在a-tags上支持它。所以你需要像这样的JavaScript回退。 Detecting IE6 using jQuery.support

Answer 2

如果您只想在悬停时更改课程，则甚至不需要JavaScript。只需给你的所有div一个公共类，并使用CSS :hover伪类来改变悬停时的样式：

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

.SidingPainting:hover {
  ...
}