javascript - div鼠标悬停问题

Question

我试图text在我将 img 悬停时显示我的班级，并在用户将鼠标移出div而不是img.

使用以下代码，一旦鼠标离开 img，文本类就会被隐藏。任何人都可以帮助我吗？非常感谢。

我的代码：

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

用干净的方式来做，给图像一个类，比如 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');
});

Answer 2

为什么不直接使用 CSS？

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