se dentro il link hai solo un immagine allora potresti usare l'opacity in modo da creare l'effetto sbiadito

a img {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
a:hover img {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

se invece hai anche del testo del testo ti conviene usare la soluzione che giù usi: aggiungere una png trasparente sovrapposta che sparisce allo stato hover mi sembra una complicazione

Se il tuo problema era quello di ridurre il numero di immagini, anzichè farne due per ciascun link, ne fai una sola che abbia entrambi gli stati (acceso e spento) e poi utilizzi opportunamente la proprietà background-position per visualizzare la sezione di immagine che ti serve