Hey guys,

I have a problem making my website. I have this logo, and on hovering I want it to glow.
Now I have two images logo.png and logoGlow.png and on hovering I want to fadein logoGlow.png.

Now I have this:

<head>
HTML Code:
<script>
$(function() {
			$(".logo")
			.find("span")
			.hide()
			.end()
			.hover(function() {
				$(this).find("span").stop(true, true).fadeIn();
			}, function() {
				$(this).find("span").stop(true, true).fadeOut();
			});
		});
</script>
<body>
HTML Code:
<a href="index.html" class="logo">Arrow<span></span></a>
CSS
Code:
.logo {
margin-top: 30px;
display:inline-block;
position:relative;
text-indent: -9999px;
width: 463px;
height: 178px;
background: url(logo.png) no-repeat;
}
.logo span {
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(logoGlow.png) no-repeat;
}
But it's not working. Can you guys help me?