jQuery : 마우스를 가져 가서 클릭 할 때 버튼에서 동일한 특이성을 가진 클래스 토글

다음 스타일이 있습니다.

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/