Devo realizzare un'interfaccia con dei pulsanti (con tag <a>) con un'icona al centro, un titolo e uno sfondo colorato (simile a Windows 8, per capirci).
Passando sopra i pulsanti (:hover) lo sfondo dovrà cambiare in un colore fisso (tipo grigio chiaro).

Quando funziona?
Quando imposto una cosa del tipo:
codice:
.pulsante { background-color:#ffcc00; }
.pulsante:hover { background-color:#dddddd; }

<a class="pulsante">Item 1</a>
<a class="pulsante">Item 2</a>
Passando sopra col mouse il pulsante cambia colore.

Poichè i pulsanti vengono generati da codice PHP assegno direttamente nel tag <a>, oltre alla classe del pulsante, anche lo stile:

codice:
.pulsante { }
.pulsante:hover { background-color:#dddddd; }

<a class="pulsante" style="background-color:#ffcc00;">Item 1</a>
<a class="pulsante" style="background-color:#99aa55;">Item 2</a>
Problema
Ora ho i pulsanti colorati in modod differente ma non ho più l'effetto hover in grigio chiaro.

Come posso continuare ad avere l'effetto hover e pulsanti "diversamente" colorati?