javascript - 错误 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>​

还有我的脚本：

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
        });
    });
});​

当我将鼠标悬停在 background-2 是 event mousemove not run button submit 时出错，如何解决？演示在这里

Answer 1

你可以在这里看到demo，希望对你有帮助！！！

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);  
    }               
});