Question

I am trying to show my text class when I hover the img and hide them when user mouseout the div instead of img.

With the following codes, the text class is hidden as soon as mouse out of img. Can anyone help me about it? Thanks a lot.

My code:

HTML

<div id='container'>
    <div class='imgDiv'>
        <img src='a.jpg' />
        <br>
        <p class='text'> picutre text!!! </p>
    </div>
</div>

CSS

.imgDiv{
    height:500px; //way higher than the image
}

jQuery

//I want to show text only when mouse hover to img
$('#container').on('mouseover','img',function(){                 
    $(this).closest('div').css('background-color','grey');
        $(this).parent().siblings('.text').fadeIn('fast');
    });

//I want to hide text when mouse out of imgDiv but it doesn't work with my following codes
//the text will be hidden right after mouse out of image
$('#container').on('mouseout','.imgDiv',function(){
    //hide text
    $(this).children('.text').fadeOut('fast');             
});

Answer 1

Why not just use CSS?

.imgDiv p {display:none}
.imgDiv:hover p {display:block}