Javascript Div鼠标悬停问题

当我在img上悬停时，我试图显示我的

文本

类，当用户将鼠标从

div中移出时，我试图隐藏它们，而不是
img

使用以下代码，文本类将在鼠标离开img后立即隐藏。有人能帮我吗？非常感谢

我的代码：

HTML

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

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');             
});

用干净的方法，给图像一个类，比如text_trigger，然后使用它

$('.text_trigger').hover(function() {                 

   $(this).closest('div').css('background-color','grey');
   $(this).parent().siblings('.text').fadeIn('fast');
}, function() {
  $(this).parent().siblings('.text').fadeOut('fast');
});

用干净的方法，给图像一个类，比如text_trigger，然后使用它

$('.text_trigger').hover(function() {                 

   $(this).closest('div').css('background-color','grey');
   $(this).parent().siblings('.text').fadeIn('fast');
}, function() {
  $(this).parent().siblings('.text').fadeOut('fast');
});

为什么不直接使用CSS呢

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

为什么不直接使用CSS呢

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

我需要使用“on”，因为我的图片是由ajax生成的。回调函数似乎不起作用。另外，我希望文本在鼠标移出我的div后消失，而不是图像。因此请改用live:$（'.text_trigger'）。live（'hover'，function（）…live将适用于以后添加的任何.text_trigger图像。回调现在正在工作，可能是b/c parent（）。兄弟姐妹（'.text'））不正确。如果文本是图像后的下一个元素，就像它看起来一样，只需使用。next（）我需要使用“on”，因为我的图片是ajax生成的。回调函数似乎不起作用。另外，我希望文本在鼠标移出我的div后消失，而不是图像。因此使用live:$（'.text_触发器'）。live（'hover'，function（）..Live将适用于以后添加的任何.text_触发器映像如果回调正在工作，则可能b/c parent（）。兄弟姐妹（'.text'）不正确。如果文本是映像之后的下一个元素，就像它看起来一样，只需使用.next（）