A sua pergunta já foi respondida, mas isso que está querendo fazer dispensa o uso de Javascript. Normalmente são usados spritessprites para exibir imagens que possuem "estados" diferentes. E até para evitar realizar "n" requisições para baixar várias imagens.
Nessa respostaNessa resposta há um exemplo simples, aliás, a técnica é simples. Consiste em criar um arquivo com as imagens (preferencialmente) lado a lado e definir que essa imagem será o background de um elemento. Posteriormente o controle da alternância de imagens é realizado somente modificando o valor da propriedade background-position
.
Por exemplo, considerando a imagem:
No caso de eu querer usar somente as imagens do Google Plus e Linkedin, poderia fazer assim:
.icon {
background: url('https://i.sstatic.net/0lq3l.png');
display: inline-block;
transition: background-position 400ms;
height: 30px;
width: 33px
}
.icon.gplus { background-position: 533px 0 }
.icon.gplus:hover { background-position: 533px 95% }
.icon.linkedin { background-position: 500px 0 }
.icon.linkedin:hover { background-position: 500px 95% }
<div class='icon gplus'></div>
<div class='icon linkedin'></div>
Imagem utilizada no exemplo por Di Web.