1

私のプロジェクトファイルはここからダウンロードできます：https：//rapidshare.com/files/1601614875/projectFiles.zip [必要に応じて："2MBのみ]

WebページとWebページ内のポップアップがあります。ポップアップには、div内に2つの画像と見出しがあります。ホバーしたときにdivを非表示にして、同じ画像が大きく、段落内にある別のdivを表示したいと思います。メインのWebページの同じコンテンツに対してまったく同じ機能があり、完全に機能しますが、ポップアップではまったく機能しません。

私のHTMLコード：

<div class="thumb-list" id="popup-thumb-list">
   <div class="actor">
      <div class="small-thumb-holder">
         <a href="" class="actor_thumb"><img src="images/actor-01.jpg" width="65" height="50" /></a>
         <h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
      </div>
      <div class="big-thumb-holder" id="big-thumb-holder">
         <a href="" class="big-thumb"><img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" /></a>
         <p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
      </div>
   </div>
   <div class="actor">
      <div class="small-thumb-holder">
         <a href="" class="actor_thumb"><img src="images/actor-02.jpg" width="65" height="50" /></a>
         <h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
      </div>
      <div class="big-thumb-holder" id="big-thumb-holder">
         <a href="" class="big-thumb"><img src="images/030Rachel_O_meara-ID15405.jpg" width="150" /></a>
         <p>Rachel O'Meara as Agent<br>Click to see profile.</p>
       </div>
   </div>
</div>

Javascriptコード：

$('.small-thumb-holder').mouseover(function(){
   $(this).parent(".actor").css({width:150},100);
   $(this).hide();
   $(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
   $(this).parent(".actor").css({width:80},100);
   $(this).hide();
   $('.small-thumb-holder').show();
})

うまくいかない私の試み：

<div class="small-thumb-holder" onmouseover="(function(){
        $(this).parent(".actor").css({width:150},100);
        $(this).hide();
        $(this).next('.big-thumb-holder').show();
    };">
    <a href="" class="actor_thumb">
        <img src="images/actor-01.jpg" width="65" height="50" />
    </a>
    <h3>Lucas Allen</h3>
    as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
        $(this).parent(".actor").css({width:80},100);
        $(this).hide();
        $('.small-thumb-holder').show();
    }">
4

1 に答える 1

0

ポップアップがロードされた後にjQueryコードを実行して、mouseoverイベントとmouseoutイベントがdivにバインドされるようにする必要があります。これを行うには、jQuery行を関数でラップし、ポップアップをロードした後に呼び出すことができます。

于 2012-07-15T07:43:15.627 に答える