錯誤mousemove事件無法在其他框架中顯示按鈕？

Question

我有一個示例代碼：

<div id="background-1" style="background: url('image1.png') no-repeat left center; width: 200px; height: 200px; float: left;"> 
    <div id="button-wrapper" style="position: absolute; opacity: 1; z-index: 100;"> 
     <input type="button" value="submit">  
    </div> 
</div> 

<div id="background-2" style="background: url('image2.png') no-repeat right center; width: 200px; height: 200px; float: right;"> 
    <div id="button-wrapper" style="position: absolute; opacity: 1; z-index: 100;">  
    </div> 
</div>​ 

而且我的腳本：當我將鼠標懸停背景-2事件MouseMove無法運行按鈕提交

jQuery(document).ready(function(){ 
    jQuery("div[id^=\'button-wrapper\']").parent().mousemove(function(e){ 
     var _top = e.pageY - 5; 
     var _left = e.pageX - 5; 
     var _c = jQuery(this); 
     var _p = _c.position();; 

     if (_top > (_p.top + _c.height())) _top = _p.top + _c.height(); 
     if (_left > (_p.left + _c.width())) _left = _p.left +_c.width(); 
     jQuery("div[id^=\'button-wrapper\']").css({ 
      top: _top, 
      left: _left 
     }); 
    }); 
});​ 

錯誤，如何解決呢？演示here

Answer 1

你可以看到demo here，希望能幫到你!!!

var yellow = $('div[id^=\'yellow\']'); 
var offset = yellow.offset(); 
var offsetWidth = offset.left + yellow.width(); 
var offsetHeight = offset.top + yellow.height(); 

var red = $('#red'); 

yellow.on('mousemove', function (e) { 
    red.css("left", e.pageX); 
    red.css("top", e.pageY); 
}); 

red.on('mousemove', function (e) { 
    if(e.pageX >= offset.left && e.pageY >= offset.top && 
     e.pageX <= offsetWidth && e.pageY <= offsetHeight) { 
     red.css("left", e.pageX); 
     red.css("top", e.pageY); 
    }    
});