>我有一个示例代码:
<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 时出错是事件鼠标移动而不是运行按钮提交,如何解决? 演示在这里
你可以在这里看到演示,希望对你有所帮助!!
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);
}
});