jQuery：悬停和单击时在按钮上切换具有相同特性的类答案

【问题标题】：jQuery: Toggling a class with same specificity on a button when hovering and clickingjQuery：悬停和单击时在按钮上切换具有相同特性的类
【发布时间】：2015-09-09 05:45:12
【问题描述】：

我有以下样式：

button {
    background-color: blue;
}
.green {
    background-color: green;
}
.red {
    background-color: red;
}

还有下面的 jQuery：

    $('button').click(function(e) {
        $(this).toggleClass('red');
    });
    $('button').hover(function(e) {
        console.log('hoverin');
        $(this).toggleClass('green');
    });

我希望所有按钮都具有以下功能：

当一个按钮被点击时，它应该在红色和蓝色背景之间切换。当一个按钮被悬停在上面时，它应该切换绿色背景。仅当背景为蓝色时，这在上面的代码中才有效。我假设这是因为 css 的特殊性。

如果是这种情况，并且我希望所有按钮都具有此功能，那么当它们都具有相同的 css 特异性时，如何在红色和绿色之间切换？

小提琴链接：http://jsfiddle.net/rtq2yoxx/

【问题讨论】：

为什么不使用:hover 和:active css 伪选择器？它与切换类本质上相同，但提供了更多的特异性。
@PitaJ：好问题。只是因为我熟悉 jQuery 事件处理程序。

标签： javascript jquery html css

【解决方案1】：

快速解决方案：将.green 样式移到最后：

button {
    background-color: blue;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}

Updated Fiddle

您也可以避免使用 hover() 方法并改用 CSS3 hover：

button:hover {
    background-color: green;
}

Fiddle 2

【讨论】：

【解决方案2】：

将您的.green 规则颜色属性设置为!important：

button {
    background-color: blue;
}
.green {
    background-color: green !important;
}
.red {
    background-color: red;
}

【讨论】：

有人告诉我这是一件坏事。
如果使用不当，一切都会变糟。

【解决方案3】：

我会使用 css hover 区别：

button {
    background-color: blue;
}
button:hover {
    background-color: green;
}

.red {
    background-color: red;
}

jquery：

$('button').click(function(e) {
    $(this).toggleClass('red');
});

JS Fiddle

【讨论】：