javascript - jQuery:悬停和单击时在按钮上切换具有相同特性的类

Question

我有以下样式:

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 特异性时，我如何在红色和绿色之间切换？

fiddle 链接:http://jsfiddle.net/rtq2yoxx/

Answer 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