Where you have $('div.out > .inHead') or $('div.out > .outHead'), that
selects every .inHead or .outHead element that is a child of *any* div.out
element. That's what's causing the behavior you observed.
It sounds like what you want instead is to have these select only the
.inHead or .outHead elements within the element that triggered the hover
function.
In each of the hover callbacks, "this" is the element whose children you
want to select. So, you can select those elements with $('.inHead',this) and
$('.outHead',this).
-Mike
> From: Sero
>
> Hello,
>
> Run into a snag, that's beyond me, hoping someone can help me
> get this sorted...
>
> When you hover over div.third, one of it's child divs
> disappears and another fades in. On RollOut it reverses.
>
> There are many instances of div.third (and it's children) on the page.
>
> I got something kindof working, but when a user rolls over
> one of the div.thirds, all of the div.thirds on the page show
> and hide the child divs inside them. I only want the
> children in the div.third that is currently hovered over to
> show and hide it's children, and the rest on the page should
> stay as they are.
>
> I'm guessing it has something to do with a "this" used
> somewhere, but can't figure that part out. Any help would be great!
>
> HTML:
> <div class="third out"> <img src="blah.jpg" /><br />
> <div class="outHead">Header that shows by default</div>
> <div class="inHead">Swapped out header</div>
> </div>
> <div class="third out"> <img src="blah.jpg" /><br />
> <div class="outHead">Header2 that shows by default</div>
> <div class="inHead">Swapped out header2</div>
> </div>
> <div class="third out"> <img src="blah.jpg" /><br />
> <div class="outHead">Header3 that shows by default</div>
> <div class="inHead">Swapped out header3</div>
> </div>
>
> JS:
> $(document).ready(function() {
> $('div.out').hover(
> function(){
> $("div.out > .inHead").fadeIn('100');
> $("div.out > .outHead").hide();
> },
> function(){
> $("div.out > .inHead").hide();
> $("div.out > .outHead").fadeIn('100');
> }
> );
> });
>
