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

【问题标题】：apply javascript functions to all objects in a css class将 javascript 函数应用于 css 类中的所有对象
【发布时间】：2011-04-24 22:17:54
【问题描述】：

我有这个代码：

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

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

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

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

【问题讨论】：

我不明白...？垒球？

标签： javascript jquery css

【解决方案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

【讨论】：

【解决方案2】：

如果您只是想在悬停时更改类，您甚至不需要 JavaScript。只需给你所有的divs 一个通用类，然后使用 CSS :hover 伪类来更改悬停样式：

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

.SidingPainting:hover {
  ...
}

【讨论】：