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
