Making onmouseout and onmouseover work correctly in Opera while cursor moves between iframes

Question

I have the following code. Here iframe2 will be on top of iframe1 near it's right. When the user moves the mouse on iframe2 the size should increase and it should move to the left and when the moves leaves iframe2 it must go back to it's original size. The Javascript below does it. The code works fine in Firefox, but in Opera 10.50 it does not. When the mouse cursor leaves iframe2 and immediately enters iframe1 the onmouseout event of iframe2 does not fire. similarly when the mouse cursor enters iframe2 from iframe1, the onmousemove event of iframe2 does not fire. This code absolutely has to work in Opera. Is there anyway I can make onmouseout and onmouseover work correctly with iframes in Opera?

.pg {
 width: 800px;
 height: 480px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 left: 240px;
 top: 150px;
}

.iframe2divclass{
  position: absolute;
  opacity:0.95;
  z-index:0;
  left: 552px;
  top: 0px;
  right: 0px;
  width: 250px;
  height: 480px;
  border:none;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  }

<div class="pg">
<iframe src="Page1.html" name="iframe1" id="iframe1" width="100%" height="100%" frameborder="1"></iframe>
<div class="iframe2divclass" id="frame2div" >
 <iframe name = "iframe2" id="iframe2"  src = "Page2.html" frameborder = "0" allowtransparency="true" height="100%" width="100%" scrolling="no">
 </iframe>
</div>
</div>

     function extendUi()
     {
    //Make iframe2 bigger
      iframe2obj.style.width="250px";
      iframe2obj.style.left="552px";

     }

     function retractUi()
     {
    //make iframe2 smaller
      iframe2obj.style.width="10px";
      iframe2obj.style.left="792px";

     }

     iframe2obj.addEventListener('mouseout',retractUi,true);

     iframe2obj.addEventListener('mouseover',extendUi,true);

     iframe1obj.addEventListener('mouseover',retractUi,true);