Comment puis-je utiliser :hover avec plusieurs classes

J'ai un css des boutons de style et de quelques modes de couleurs styles. J'utilise la couleur des classes de couleur les choses de la même couleur et d'un style de bouton pour activer les boutons ronds.

Comment puis-je ajouter un hover style pour mes boutons pour changer la couleur, une teinte plus claire? Je pensais que ça allait être aussi simple que .classe classe2:hover {etc} mais ça ne fonctionne pas pour une raison quelconque.

Ici un violon que j'ai préparé pour le démontrer:
http://jsfiddle.net/7n4Wy/

HTML

<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>

CSS

.red {
    background: red;
}

.blue {
    background: blue;    
}

.button {
    border-radius: 6px;
}

.button:hover .red:hover {
    background: pink;
}
InformationsquelleAutor ac_ | 2013-04-04