Alterando a cor do botão ao passar o mouse: uma resolução alternativa

Ao tentar alterar a cor de um botão ao passar o mouse, pode ser frustrante se a solução não produz o efeito desejado. Considere o código de exemplo fornecido:

a.button {
   ...
}
a.button a:hover{
     background: #383;
}

Esta solução tenta alterar a cor de fundo de um link quando ele passa o mouse sobre um elemento com a classe "botão". No entanto, isso não funciona porque o seletor está incorreto.

Para alterar efetivamente a cor do botão ao passar o mouse, a sintaxe correta é:

a.button:hover{
     background: #383;
}

Nesse caso, o seletor "a.button:hover" tem como alvo o próprio link "botão" quando ele passa o mouse, permitindo a mudança de cor pretendida.