Question

我有一个示例代码：

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

和Jquery

jQuery(document).ready(function(){
    jQuery("div[id^=\'button-wrapper\']").parent().mousemove(function(e){
        jQuery("div[id^=\'button-wrapper\']").css({
            top:e.pageY-5,
            left:e.pageX-5
         });
    });
});

当鼠标移出框架时出错（div id =“button-wrapper”）它在帧外运行，如何修复它，只在框架中运行？（演示here）

Answer 1

在代码中定义mousemove的包含。

Answer 2

检查此链接..代码已更新...

CHECK THIS LINK

我在该鼠标movemnet上添加了约束

 var a = $(this).height()-15;
         var b = $(this).width()-35;
        if(e.pageY < a&& e. pageX < b)
        {
        $('div[id^="button-wrapper"]').css({
                        top:e.pageY-5,
            left:e.pageX-5
         });
    }

Answer 3

您需要检查鼠标是否在父div之外移动。请参阅示例 - http://jsfiddle.net/qCbwr/40/。

var _c = $(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();

如果您不希望控件完全超出div，则需要允许按钮的大小。

使用jquery使用mousemove移出frame div标签时出错？

3 个答案: