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.

Answer 2

simply add your element .cartouche to the selector

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

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

Answer 3

I would base the mousover action on the container :

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

Answer 4

Here is the solution:

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

You have to add ".cartouche" as the element you hover over, otherwise you will get issues when you hover over it.

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

Or you use the solution from Josh that is probably the better one: Instead of writing:

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

write

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

This is better for the future. If you add additional divs on the picture that you want to show, for example .carouche2, it would be much easier to code.

Answer 5

Try This

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

Happy Coding!!