text div show and hide on mouseOver img

Question

I'm using a jquery code to show and hide text div when mousOver on an img. It works fine, but when the div is shown, whne mouseOver the div, it hides and show again when mouseOver it. What I want to do is to show the div when mouseOver the image, and when mouseOver inside the image and over the text divs that the div not hides, I want the div to hide only when mouseOut from the img. The problem is I guess because my div is with position:absolute, but I have to keep this.

here is my jquery :

$(".image_big").hover(function(){
    $('.cartouche').show();
},function(){
    $('.cartouche').hide();
});

and my CSS :

.cartouche {display:none;position: absolute;
bottom: 0px;
background-color: #00B252;
color: white;
text-transform: uppercase;
text-align: left;padding: 10px}

.image_big_container{width:473px;height:330px;text-align: center;}
#slideshow{margin-top: 20px;position:relative}
#slideshow_big { margin-bottom:10px}

here is JSfiddle to see it in action :

http://jsfiddle.net/m7zFb/352/

also I will have many images on my website, and would like to sjow the text div only from the images selected, is there a way to add a this.children to only target the image I'm mouseOver ?

hope you understand my question,

thanks for your help

Answer 1

You don't need jQuery for this. You can do it in pure CSS:

.image_big:hover + div.cartouche, div.cartouche:hover {
    display:block
}

Demo: http://jsfiddle.net/m7zFb/356/

Since this uses Adjacent sibling selector it will always select DIV relative to image you're currently hovering over, no matter how many "image+div" combinations you have on the page.