javascript - 隐藏一个 div 并显示另一个 div 代替它的功能不适用于弹出窗口

Question

我的元素文件可以在这里下载:https://rapidshare.com/files/1601614875/projectFiles.zip [如果需要:”只有 2mb]

我有一个网页和网页内的弹出窗口。在弹出窗口中，有两个图像和一个 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 事件绑定(bind)到 div。为此，您可以将 jQuery 行包装在一个函数中，并在加载弹出窗口后调用 if。