隱藏一個div並顯示另一個div代替它的功能不適用於彈出窗口

Question

我的項目文件可以在這里下載： https ://rapidshare.com/files/1601614875/projectFiles.zip [如果需要：“僅2mb]

我有一個網頁，並且該網頁中有一個彈出窗口。 在彈出窗口中，有兩個圖像和一個div內的標題，我希望將div懸停時隱藏並顯示另一個div，其中的div相同，圖像較大且有一個段落。 對於主頁中的相同內容，我具有完全相同的功能，它可以完美運行，但是在彈出窗口中根本不起作用。

我的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();
    }">

Answer 1

您需要在加載彈出窗口后執行jQuery代碼，以便mouseover和mouseout事件將綁定到div。 為此，您可以將jQuery行包裝在一個函數中，並在加載彈出窗口后調用。