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

你可以简单地做：

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

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

更新了您的小提琴：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 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
    });}
});

使用jquery鼠标的边界跟随

3 个答案: