jquery 鼠标跟随边界

Question

我创建了一个fiddlehttp://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

你可以简单地做：

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

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

更新了您的fiddle：http://jsfiddle.net/2g4sjbr0/3/

Answer 2

我认为需要某种优化，因为我认为鼠标有时会超出区域..

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

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

Answer 3

fiddle q基本解决！ :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
    });}
});

jquery 鼠标跟随边界

Boundaries with jquery mouse follow

jquery

mouseover