Div鼠標懸停問題

Question

當我將鼠標懸停在img上時，我試圖顯示我的text類；當用戶將其從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}