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特性时，我如何在它们之间切换呢？

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

Answer 1

快速解决方案:最后移动.green样式：

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

更新Fiddle

您还可以避免使用hover()方法，而使用CSS3悬浮：

button:hover {
    background-color: green;
}

小提琴2

Answer 2

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

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

Answer 3

我会使用css悬停的区别：

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

.red {
    background-color: red;
}

Jquery：

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

JS Fiddle