2010-11-21 16 views
2

私はこれをしたい:1つの画像にマウスオーバーすると、タイトルを表示します。私は、次のコードを使用します。ピクチャをホバーすると、すべてのピクチャのタイトルが表示されます。タイトルを1つだけ表示するようにコードを変更するにはどうすればよいですか?jqueryの使い方画像のタイトルを表示

<script type="text/javascript">  
     $(function() { 
      $('.image').each(function() { 
       $(this).hover(
        function() { 
         $('.title').animate({ opacity: 1 }) 
        }, 
        function() { 
         $('.title').stop().animate({ opacity: 0}); 
        }) 
       }); 
     }); 
</script> 

<div class="image"><img src="img1" /><p class="title">text1</p></div> 
<div class="image"><img src="img2" /><p class="title">text2</p></div> 
<div class="image"><img src="img3" /><p class="title">text3</p></div> 

答えて

9

この$('.title')

$('.title', this)を参照してください変更してみてください: http://api.jquery.com/jQuery/

+0

うわー、おかげで多くのことを。私はその第二の議論について知らなかった! – Blender

+0

+1エレガントでシンプル。 –

+0

それは明らかに良い方法です。 –

0

を私はjQueryの上のビットさびんだけど、この作品はあなたのためでしょうか?

<script type="text/javascript">  
    $(document).ready(function() 
    { 
    $('.image').hover(function() 
     { 
     $(this).search('p.title:eq(0)').stop().animate({opacity: 1}); 
     }, function() { 
     $(this).search('p.title:eq(0)').stop().animate({opacity: 0}); 
     }); 
    }); 
    }); 
</script> 

<div class="image"><img src="img1" /><p class="title">text1</p></div> 
<div class="image"><img src="img2" /><p class="title">text2</p></div> 
<div class="image"><img src="img3" /><p class="title">text3</p></div> 

アニメーション化すべて.titleの要素を呼び出しているからです。画像と同じ<div>の中に.title要素が含まれている必要があります。


実際には、ダニエルの答えは良く見えます:

+0

正しい考えですが、 '.parent()'は間違っています。 '$(this).find( '。title')。stop ...'で十分です。ダニエルの答えが示唆するように '$( '。title'、this) – BudgieInWA

+0

...または '$(this).children(" p ")'のバリエーションのために:) –

関連する問題