Question

My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:” only 2mb]

I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.

my HTML code:

<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 code:

$('.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();
})

My attempt which does not work:

<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

You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.