我有一个示例代码:
<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时出错是事件mousemove not run按钮提交,如何解决?演示here
答案 0 :(得分: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);
}
});