2

私は2つのdivを持っています。1 つの大きな黄色のボックスと 1 つの小さな赤いボックス。jQuery を使用して、黄色のボックスに 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

2 つの独立した div を作成しました。黄色の赤い div 部分を作成すると、うまくいきます。<div id="box1"></div><div id="box2"></div>に変更<div id="box1"><div id="box2"></div></div>

于 2012-08-21T20:21:47.840 に答える