2

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

谢谢

代码在这里：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>
4

2 回答 2

1

我在这里 (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);  
    }               
});
于 2012-08-21T20:19:57.857 回答
0

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

于 2012-08-21T20:21:47.840 回答