0

img をホバーするとクラスを表示し、ユーザーが代わりにtextマウスアウトするとクラスを非表示にしようとしています。divimg

次のコードでは、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');             
});
4

2 に答える 2

2

それをきれいな方法で行い、画像に 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');
});
于 2012-08-08T01:17:14.773 に答える
1

なぜ CSS だけを使用しないのですか?

.imgDiv p {display:none}
.imgDiv:hover p {display:block}
于 2012-08-08T01:17:47.830 に答える