Javascript 在鼠标上方显示光标周围背景图像的一部分

我想将背景图像添加到我的网页，隐藏它，然后在鼠标上显示光标周围的图像部分。我想在jQuery、JavaScript、CSS3和HTML5中实现这一点。有人能帮我吗？

这里有一个方法（另一个延迟低于该方法的演示）：

var circle=document.getElementById（'circle'）；
文档.添加的列表器（'mousemove'，positionCircle）；
函数位置圆（e）{
circle.style.left=e.clientX+'px'；
circle.style.top=e.clientY+'px'；
}

/*演示的基本样式*/
html{
最小高度：100%；
}
身体{
背景图片：url(http://www.pageresource.com/wallpapers/wallpaper/cute-cat-kitty-kitten.jpg);
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
最小高度：100%；
}
/*你的圈子*/
#圈{
填料：2米；
位置：固定；
排名：0；
左：0；
边缘顶部：-502em；
左边缘：-502em；
背景：透明；/*通过圆圈显示*/
-moz边界半径：504em；
边界半径：504em；
边框：500em实心rgba（0,0,0,6）；/*制作一个巨大的边框以隐藏其余部分*/
不透明度：0；
-webkit过渡：不透明度。5s轻松；
-moz过渡：不透明度。5s缓解；
过渡：不透明度。5s缓解；
}
#圆圈：悬停{
不透明度：1；
}

---

到目前为止你有没有努力过？还是你希望自己能从头开始解决这个问题？