我试图让一个div在另一个div中移动到我鼠标的方向,但是它不应该离开它所在的div,这正是它所做的。有没有办法让它卡在另一个div里面?
$(document).on('mousemove', function(e) {
$('#pupil').css({
left: e.pageX,
top: e.pageY
});
});
#eye {
position: absolute;
height: 50px;
width: 68px;
border-radius: 100px;
top: 132px;
background-color: black;
}
#pupil {
position: absolute;
z-index: 3;
width: 25px;
height: 25px;
border-radius: 100px;
background-color: white;
}
#eye2 {
position: absolute;
height: 66px;
width: 78px;
border-radius: 100px;
top: 125px;
left: 200px;
background-color: black;
}
#pupil2 {
position: absolute;
z-index: 3;
width: 25px;
height: 25px;
border-radius: 100px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="eye">
<div id="pupil"></div>
</div>
<div id="eye2">
<div id="pupil2"></div>
</div>
这里也有一个fiddle!
谢谢你的帮助!
3条答案
按热度按时间q43xntqr1#
使用这个:
字符串
t9aqgxwy2#
在
#pupil
上使用position: fixed
。https://jsfiddle.net/8m74okbe/字符串
gpnt7bae3#
如果有人想能够做到这一点的影响,这里是一个迟来的答案: