Question

我有2个div。一个大黄色盒子和一个小红盒子。我使用jQuery将鼠标移动效果附加到黄色框上。当鼠标悬停在黄色框上时，鼠标悬停会使红色框跟随鼠标。当鼠标到达黄色框中的红色框时，黄色框上不再移动鼠标，红色框停止跟随鼠标。当鼠标再次进入黄色框时，它会再次移动鼠标 - 当然。红色框必须跟随鼠标，只要它在黄色框上方并且不停止，因为它在红色框本身上移动。有没有办法防止这种情况？

由于

此处代码：http://jsfiddle.net/Illum/pPn3v/

<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
#box1 {width: 500px; height: 500px; background-color: Yellow; border: 2px solid Blue;}
#box2 {width: 100px; height: 100px; background-color: red; border: 2px solid pink; z-index: 100; position: absolute;}    
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>

<script type="text/javascript">
    $("#box1").bind('mousemove', function (e) {
        $("#box2").css("left", e.pageX);
        $("#box2").css("top", e.pageY);
    });
</script>

</body>
</html>

Answer 1

我已经为你的问题here (jsfiddle)写了一个解决方案。它可能不是最干净的解决方案，但它是我能想到完成任务的唯一方法，而不会将div嵌入其中。

我基本上在“红色”框中添加了另一个监听器，用于检查它是否仍在黄色框内。

var yellow = $('#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);  
    }               
});

Answer 2

你做了两个独立的div。如果你制作黄色的红色div部分，它将适合你。将<div id="box1"></div><div id="box2"></div>更改为<div id="box1"><div id="box2"></div></div>

jquery - mousemove：如何防止div停止跟随鼠标

2 个答案: