div随着鼠标移动而移动

我做的是类似一个鼠标移入展示图标，移出消失如下展示：

(很丑，时间关系就简单做了一个，但是功能健全，可以随意扩展和修改)

1.页面上元素

//这个div是用来渲染图片的，所以初始是隐藏的而且是悬浮在页面上面的不影响其他展示

<div id="img_div" style="display: none;align-self: center;z-index: 5;position:fixed" ></div>
//这个div是页面上获取数据的（我的数据后台传递过来的）

<div class="img_div" >

<input class="img_in" value="${row.logoUrl}"/>

</div>

2.js代码部分（页面加载完毕）

//获取隐藏的div dom对象
var o = document.getElementById("img_div");

//为页面上input所在div 绑定鼠标的移入移出事件
//并且调用动态获取鼠标坐标的方法
//function(event)方法的event参数是为了兼容火狐浏览器的
$(document).on("mouseover",".img_url",function(event){
    var e = event || window.event;
    //获取鼠标的y轴坐标因为页面是滚动的加上滚动值 所以渲染的div 设置position:fixed相对的
    var yy = e.clientY + document.body.scrollTop;
    var xx = e.clientX;
    $('#img_div').css({top: yy+20, left:xx});
	
    //获取input的值 并给页面渲染一个img标签解析图片
    var imgU = $(this).children().val();
    $("#img_div").html("<div style='text-align: center;'><img src='"+imgU+"' width='100%' height='85%'/>"+imgU+"</div>");
    o.style.display="block";
});

//鼠标移出
$(document).on("mouseout",".img_url",function(){
    var imgU = $(this).text();
    o.style.display="none";
});

如有披露或问题欢迎留言或者入群探讨