Mudar atributo no hover, mas retornar ao original na saída

[Maykel-ctba 233]

Fala povo,

 

Tenho o seguinte caso:

<img class="hover-change" src="/site/img/content/home/icone-cafe-da-manha.png" data-hover="/site/img/content/home/icone-cafe-da-manha-hover.png" />

Ao passar o mouse na imagem, quero trocar pela imagem que está em data-hover. Até aí, consigo, mas não estou conseguindo retornar a imagem original.

$(".hover-change").hover(function()
{
	var imgOriginal = $(this).attr('src');
	var imgTroca = $(this).attr('data-hover')
			
	$(this).attr('src',imgTroca);
},
function()
{
	$(this).attr('src',imgOriginal);
});

Até entendo que o que tentei não funcionaria pelo fato de imgOriginal estar dentro da primeira função, e não da segunda... mas como posso fazer para que funcione? Não posso deixar a variavel fora, pois existem vários "hover-change" pela página e se eu deixar fora, vai só pegar o último.

Resolvido.

$(".hover-change").hover(function()
{
	var imgOriginal = $(this).attr('src');
	var imgTroca = $(this).attr('data-hover')
			
	$(this).attr('src',imgTroca);
	$(this).attr('data-hover',imgOriginal);
},
function()
{
	var imgOriginal = $(this).attr('data-hover');
	var imgTroca = $(this).attr('src')
			
        $(this).attr('src',imgOriginal);
	$(this).attr('data-hover',imgTroca);
});	

[William Bruno 1501]

Se é um ícone, não é bem uma "imagem informativa", mas sim, mais "ilustrativa".

Pq não usa css ?

 

Ai vc até otimiza isso para um sprite.

[Maykel-ctba 233]

William, as imagens vem de um CMS, hehe. Não rola fazer sprite. Obviamente foi a primeira idéia, mas pelo fato do conteudo ser dinamico, ficaria complicado.