You have to scope the hover to the current image, otherwise all div
with class "item_info" will show up (because, by default $("selector")
operates on the entire document, like $("selector", document)), here
is how you do this:
Assuming an HTML structure like this:
<div class='item'>
<div class='img_cont'>
<div class='item_info'>264 VIEWS</div>
<img src="some-img.gif"/>
</div>
</div>
$('.item img').hover(function() {
$(this).siblings(".item_info").animate({ opacity: 'show' }, 700);
}, function() {
$(this).siblings(".item_info").animate({ opacity: 'hide' }, 700);
});
Check out the documentation for how selectors work here:
http://docs.jquery.com/Core/jQuery#expressioncontext
and here:
http://docs.jquery.com/Selectors
- jake
On Sun, Apr 13, 2008 at 12:46 PM, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> I am creating my first site with jquery. (Its my first time with
> javascript, and I love it)
> I have most of it ready, one thing I am completely stuck on.
>
> I have a bunch of images that when you hover over each one there
> should be a div appearing. Right now when I hover over any image the
> div appears on all images. I only want it to appear on the image that
> you are hovering over and not on all instances of the image. I tried a
> lot of things, I need some help.
>
> my html:
>
> <div class='item'>
> <div class='img_cont'>
> <div class='item_info'>264 VIEWS</div>
>
> </div>
> </div>
>
> ( the div that should be showing up is item_info which by default is
> display:none; . )
>
> $('.item img').hover(function() {
> $(".item_info").animate({ opacity: 'show' }, 700);
> }, function() {
> $(".item_info").animate({ opacity: 'hide' }, 700);
> });
>
>
> ----------
> Right now there are about 30 of the same divs with class "image" and
> img's in them. When I hover over any image I see all divs on all
> images popping up. How do I target just that one single "image" div
> that the mouse is over, so that I can have the div popup whenever the
> mouse is only over the one image.
>
> Thank you
>
> - Lukas
>
