[jQuery] run a function only on "this"
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');
}
);
});