Question

我的项目文件可以在这里下载：https://rapidshare.com/files/1601614875/projectFiles.zip [如果需要：＆＃34;只有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事件将绑定到div。为此，您可以将jQuery行包装在函数中，并在加载弹出窗口后调用。

隐藏div并显示另一个div而不是弹出窗口的功能

1 个答案: