javascript - 对于网站 : How do I make an image follow the mouse pointer only in a certain area?

Question

我是网页设计和 javascript 的新手，所以请多多包涵。

我希望鼠标指针旁边出现一个图像，但仅当它在我网站的某个区域移动时。

到目前为止，我已经学会了如何使用这种方法使图像跟随鼠标指针:

//(html)
<img id="image" src="image.jpg"/>

//(css)
#image{
position:absolute;
} 

//(js)
$(document).mousemove(function(e){
    $("#image").css({left:e.pageX, top:e.pageY});
});

任何人都可以向我解释我如何能够将其限制在网站的特定区域并在鼠标指针位于该区域之外时隐藏图像吗？

Answer 1

var
    hoverBox   = $('.box-selector'),
    hoverImage = $('#image');

hoverBox.mousemove(function(e) {
    hoverImage.css({
        left: e.pageX,
        top:  e.pageY
    });
}).mouseout(function() {
    hoverImage.css({
        left: -10000,
        top:  -10000
    });
});