Show text div and hide on mouseOver img

Question

I am using jquery code to show and hide a text div when mousOver on img. It works fine, but when a div is shown, whne mouseOver div, it hides and reappears when mouseOver. What I want to do is show the div when the mouseOver is an image, and when the mouseOver is inside the image and above the text divs that the div doesn't hide, I want the div to hide only when mouseOut is from img. The problem is that I think because my div has a 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/

-, div , this.children, . - mouseOver?

, ,

Answer 1

jQuery. CSS:

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

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

, DIV , , , " + div", .

Answer 2

.cartouche

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

http://jsfiddle.net/honk1/m7zFb/353/

Answer 3

:

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

Answer 4

:

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

".cartouche" , , .

: http://jsfiddle.net/karl_wilhelm_telle/m7zFb/355/

, , , : :

$(".image_big,.cartouche").hover(function(){

$(".image_big_container").hover(function() {

. div , , .carouche2, .

Answer 5

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

!!