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规则颜色属性设置为!important：

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

Answer 2

我会使用css悬停区别：

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

.red {
    background-color: red;
}

Jquery的：

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

JS Fiddle

jQuery：在鼠标悬停和点击时，在按钮上切换具有相同特异性的类

2 个答案: