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}

Div鼠标悬停问题

2 个答案: