Help with Jquery :hover Selector

[BFTrick]

Hello.

I have navigation that looks similar to this

<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.

$(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);
	}
);

});

[robish518]

You want to set your like elements to have the same class. So menu items can all be given a class of [for example] "menuLink".

in your css you can control ".menuLink" properties and those properties will affect all of those items with that class.

the jQuery selector you would want to use is $(".menuLink", this).hover.....

the selector grabs an element whose class is menuLink, and 'this' refers to the one that is currently in the hover state. That is the one that will be manipulated by your code.

these elements should have unique ID's, not unique classes.

[BFTrick]

I wasn't clear enough in my initial post.

Here is the page I am working on: http://www.patrickrauland.com/ The selectors work just fine in my version of firefox, but they do not work in IE 7, Chrome, Safari, and some versions of firefox.

When I hover over the anchor tag I want the span within the anchor tag to fade in.

so the selector for hovering over the anchor tag is pretty easy:

$("#content h2 a").hover

But I don't know how to specify the span within the hovered anchor tag.

Thoughts? Why does this only work with Firefox and none of the other browsers?

[robish518]

Sorry it took a while to get back. I've been away from the computer for a while. If you still need a solution try this out...

This was tested in IE8, FF3, & Safari. Remember, that once you are inside the callback function for that selector, you don't need to reselect it again. Using "this" refers to the item that you have selected that is part of that selector.

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

[BFTrick]

Thanks! That works great.