0

問題はここで見ることができます：http：//www.studioimbrue.com/beta

コード：

$(document).ready(function(){
    $('div.caption').hide();
    $('.captions ul li img').hover(function(){
        $(this).siblings('div.caption').fadeIn('medium');
    }, function(){
        $(this).siblings('div.caption').fadeOut('medium');
    });
});

問題の原因がわからない...すべてが正しく設定されているようです。

4

1 に答える 1

0

問題は、キャプションが表示されたときにマウスが画像上にないことです。mouseleaveイベントが画像とmouseenterキャプション div に送信されます。前者はフェードアウトをトリガーします。イメージとキャプションの両方をコンテナー要素 (例: a <div>) に配置し、このコンテナーにイベント ハンドラーを適用することで解決できます。次に、キャプションが表示されているかどうかに関係なく、外側のコンテナーはmouseleave.

編集:これは実際の例です:

HTML:

<div class="captions" id="talktostrangers"> 
  <ul>
    <li> 
      <img src="image1.jpg"> 
      <div class="caption">Caption 1</div>
    </li>
    <li>
      <img src="image2.jpg"> 
      <div class="caption">Caption 2</div>
    </li>
  </ul>
</div>

Javascript:

$('.captions li').hover(function() {
  $('.caption', this).fadeIn();
}, function() {
  $('.caption', this).fadeOut();
});
于 2010-02-10T10:35:05.530 に答える