1

特定の画像にマウスオーバーイベントが発生した場合に各画像にdivを表示するギャラリー/カルーセルウィジェットを作成しようとしています。これまでのところ、divを表示するための次のコードがあります。

$(document).ready(function(){

  $(".background").mouseover(function(){
    $(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(".info").hide(1500);
  });
});

およびhtmlワイズ

<div id="wrapper">
<div id="slides">
    <ul>
         <li>
        <img class="background" src="images/1.png" width="240" height="240"/>
             <div class="info">Thats the info of this image</div>
    </li>
        <li>
               <img src="images/ogm.png" width="240" height="240"/>
                    <div class="info">Thats the info of this image</div>
        </li>
        <li><img src="images/2.jpg" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
        <li>
            <img src="images/3.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
        <li>
            <img src="images/4.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
       </li>
        <li>
            <img src="images/5.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
    </ul>
</div>

infoはdivで、backgroundは画像のクラスです

予想どおり、いずれかの画像にマウスオーバーすると、すべての情報divが一致して表示されます。

マウスオーバーをトリガーした背景画像に含まれる特定の情報divのみを表示することは可能ですか？

4

2 に答える 2

4

jQueryバインディング関数に与えるコールバックはthis、イベントが発生した要素のコンテキスト（）として提供されます。だからあなたは'.info'からあなたを検索するかもしれません$(this)：

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).parent().find(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(this).parent().find(".info").hide(1500);
  });
});

または（レナートの提案）：

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).sibblings(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(this).sibblings(".info").hide(1500);
  });
});

jQueryは連鎖を許可することに注意してください：

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).parent().find(".info").show(1500);
  }).mouseout(function(){
     $(this).parent().find(".info").hide(1500);
  });
});

また、ほとんどの場合、 andの代わりにmouseenterとmouseleaveが必要になることにも注意してください。mouseovermouseout

于 2012-10-06T16:26:02.517 に答える
1

画像の次を使用すると、問題が解決します。

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).next().show(1500); // show div next to img
  });
  $(".background").mouseout(function(){
     $(this).next().hide(1500); // hide div next to img
  });
});
于 2012-10-06T16:36:29.823 に答える