html - 複数のクラスで :hover を使用するにはどうすればよいですか

Question

CSS ボタン スタイルといくつかの事前定義された色スタイルがあります。カラークラスを使用して同じ色に色付けし、ボタンスタイルを使用してボタンを丸くします。

ボタンにホバー スタイルを追加して、色を明るい色合いに変更するにはどうすればよいですか? .class class2:hover {etc} と同じくらい簡単だと思っていましたが、何らかの理由で機能しません。

ここに私がデモンストレーションするために用意したフィドルがあります: 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;
}

Answer 1

次のコードJSFIDDLEを使用します

.button.red:hover {
    background: pink;
}