jQueryを使いマウスオーバーで指定した要素の中にある画像を切り替える

マウスオーバーで画像のonとoffを切り替える。
よく見かけるスクリプトですね。

例えばこういうやつ。
onとoffの画像を用意して切り替えます。

$(function(){
 $('img.hover').hover(function(){
  $(this).attr('src',$(this).attr('src').replace('_off','_on')); 
   },function(){
    $(this).attr('src',$(this).attr('src').replace('_on','_off'));
 });
});

ただ、これだと画像にhoverしたら画像を切り替えるだけ。
そうじゃないんすよ。自分のやりたいのそれじゃないんです。

自分のやりたかったのはこういうの。

aタグにhoverした際に中の画像だけ切り替える。
hoverでテキストの色が変わるのはCSSで画像の切り替えはjqueryで行ってます。

jqueryのソースはこちら。
画像があって、それを囲むaタグが存在すればaタグにhoverした際に画像urlの末尾『_off』と『_on』を切り替えてます。

<script type="text/javascript">
			jQuery(function($) {
			//アイコン hoverアクション
			$('ul a img').each(function(){
				var img = $(this);
				var src_off = img.attr('src');
				var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/, '$1_on$2');
				$('<img />').attr('src', src_on);
				$(this).parents('a').hover(function(){
					img.attr('src', src_on);
				},function(){
					img.attr('src', src_off);
				});
			});
			});
		</script>

地味だけど意外と使えるスクリプトです。