simple image fade on hover?
Total newbie here so bear with me, just trying to get a grasp and hopefully someone can help out real quick.
- <div id="items">
<div class="item">
<a href="#"><img alt="" src="#" class="itemImg" /></a>
<h3><a href="#">Heading</a></h3>
<h4>Subheading</h4>
<p>some text</p>
<a href="#">more</a>
</div>
<div class="item">
<a href="#"><img alt="" src="#" class="itemImg" /></a>
<h3><a href="#">Heading</a></h3>
<h4>Subheading</h4>
<p>some text</p>
<a href="#">more</a>
</div>
<div class="item">
<a href="#"><img alt="" src="#" class="itemImg" /></a>
<h3><a href="#">Heading</a></h3>
<h4>Subheading</h4>
<p>some text</p>
<a href="#">more</a>
</div>
</div>
what it does... Hover anywhere over div.item and the image within it fades.
Works as I have it, but when hovering over 1 div.item, all 3 images fade. How do i get it so only the image within the particular div i'm hovering over fades, and not all 3?
Code:
- $("#items .itemImg").fadeTo("fast", .6);
- $(".item").hover(function() {
$(".itemImg").each(function() {
$(this).fadeTo("fast", 1);
});
}, function() {
$(".itemImg").each(function() {
$(this).fadeTo("slow", .6);
});
});
Not sure how to split the 3 div's into separate hover events?
Many thanks!
R.