Hello.

I have navigation that looks similar to this

HTML Code:
<div id="content">
<h2><a href="/about/" class="about">About <span></span></a></h2>
<h2><a href="/portfolio/" class="portfolio">Portfolio <span></span></a></h2>
<h2><a href="/contact/" class="contact">Contact <span></span></a></h2>
<div>
And I would like to select the span tag when the parent anchor is hovered over.

This is the code I currently have, but it only works in certain versions of firefox and I would like it to work in all of the major browers. In the other browsers it will either select all of the anchor tags at the some time, or it will select none of them. I am pretty sure that the problem lies with the :hover selector in jquery.

Code:
$(document).ready(function(){

$("#content h2 a").hover(
	function(){
		$("#content h2 a:hover span").fadeTo("normal", 0.33);
	},
	function(){
		$("#content h2 a:hover span").fadeTo("normal", 0.00);
	}
);

});