границы с Jquery мыши следовать

Question

Я создал скрипку http://jsfiddle.net/2g4sjbr0/1/

То, что я хочу, что прямоугольник останавливается после мыши, когда мышь не находится в красной зоне. Кроме того, прямоугольник должен исчезнуть, когда ваша мышь не находится в красной области. Он должен появляться и продолжать следовать за мышью при повторном входе в красную область.

Я не могу понять, так что спасибо заранее

HTML:

<div id="area"> 
<div id="rectangle"></div> 
</div> 

CSS:

#area { 
width: 200px; 
height: 100vh; 
background-color: red; 
} 

#rectangle { 
position: absolute; 
width: 25px; 
height: 25px; 
background-color: black; 
} 

JQuery:

$(document).on('mousemove', function (e) { 
$('#rectangle').css({ 
    left: e.pageX, 
    top: e.pageY 
}); 
}); 

Answer 1

You может m aybe просто сделать:

$("#area").mouseleave(function() { 
    $("#rectangle").hide(); 
}); 

$("#area").mouseenter(function() { 
    $("#rectangle").show(); 
}); 

Обновлена ​​вашей скрипка: http://jsfiddle.net/2g4sjbr0/3/

Answer 2

Я думаю, что какое-то оптимизация будет необходимо Cose Я думаю, что мышь идет somethimes из области ..

http://jsfiddle.net/mkdizajn/5vp6Lthm/

$('#area').on('mousemove', function (e) { 
    $('#rectangle').css({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
}); 

Answer 3

fiddle Решение qBasic! : D

$(document).on('mousemove', function (e) { 
    var y_a = $('#area').offset().top + ($('#area').height()*1 - 25); 
    var x_a = $('#area').offset().left + 200-25; 
    console.log([e.pageX,e.pageY,x_a, y_a]); 
    if ((e.pageX < x_a) & (e.pageY < y_a)){ 
    $('#rectangle').css({ 
     left: e.pageX, 
     top: e.pageY 
    });} 
});