jsで背景画像を変更

Question

リスト内のサムネイルにマウスホバーすると、メインビジュアルの画像も変わるというものが作りたいです。

該当のソースコード

$(document).ready(function(){
	$("ul#thmb > li > a").mouseover(function(){
		var src = $(this).attr('src');
		$("#mainvisual").fadeOut("3000",function() {
			$(this).css('background-image',src );
			$(this).fadeIn("3000");
		});
		return false;
	});
});

<div id="mainvisual" style="background-image:url(main.png);">メインビジュアル</div>

<ul id="thmb">
 <li><a href="#"><img src="1.png"></a></li>
 <li><a href="#"><img src="2.png"></a></li>
 <li><a href="#"><img src="3.png"></a></li>
</ul>

#mainvisual {
    height:100px;
    width:100%;
}

上記のようなコードで試しているのですが、サムネイル画像のurlの取得がうまくいっていないようで、マウスオーバーしても画像が main.png のままフェードします。

	$(this).css('background-image','url('src')');

上記で試したところ何も取得できませんでした。

js初心者なので、どこがおかしいのか、そもそも見当違いなことをしているのかもわからなくなってしまったため、ヒントでも良いので何かご教授いただけると幸いです。

Answer 1

 $(this).css('background-image','url(' + src + ')');

としないといけないかと

Comments

[teraq]

ご回答ありがとうございます。
指定の仕方が違ったのですね。お恥ずかしいです。

こちらで試したところ動いたのですが、
url("undefined") と返ってきてしまいました。
varの定義がおかしいのでしょうか？

[turbgraphics200]

$("ul#thmb > li > a")としているからでは？<a>の配下に<img>があってそのsrcを取得するのが目的だと思うので$("ul#thmb > li > a > img").mouseover(~) とするべきなのでは？

[teraq]

度々ありがとうございます。おかげで思うような挙動になりました。
記述方法もですが、まだまだ理解できてない部分が多いようなので勉強させていただきます。
ありがとうございました。