鼠标滑过显示图片

当鼠标滑过某个制定位置，弹出div图片。移出，图片消失。

1、js 

$(function() {

	    $("#div_Content").mouseover(function() {
	        $(this).show();
	    });

	    $("#div_Content").mouseleave(function() {
	        $(this).hide();
	    });


	    //初次加载
	    Loading();

	    //鼠标经过
	    $(".a_float").mousemove(function() {

	        var _showDiv = $(this).attr("rel");
	        
	        $("#" + _showDiv + " img").eq(0).attr("src","<%=path %><spring:message code="head.weChatFocus"/>" );

	        //替换完成

	        $(this).mouseover(function() {

	            var _l = getLeft(this);
	            var _t = getTop(this) + $(this).height();
	            $("#" + _showDiv).css("top", _t); $("#" + _showDiv).css("left", _l);
	            $("#" + _showDiv).show();
	        });
	        $(this).mouseleave(function() {

	            $("#" + _showDiv).hide();
	        });

	    });

	});

	//鼠标经过

	function getTop(e) {
	    var offset = e.offsetTop;
	    if (e.offsetParent != null) offset += getTop(e.offsetParent);
	    return offset;
	}
	function getLeft(e) {
	    var offset = e.offsetLeft;
	    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
	    return offset;
	}


	function Loading() {

	    $(".a_float").each(function() {
	        var _showDiv = $(this).attr("rel");

	        $("#" + _showDiv + " img").eq(0).attr("src", "<%=path %><spring:message code="head.weChatFocus"/>");

	        //替换完成

	        $(this).mouseover(function() {
	            var _l = getLeft(this);
	            var _t = getTop(this) + $(this).height();
	            $("#" + _showDiv).css("top", _t); $("#" + _showDiv).css("left", _l);
	            $("#" + _showDiv).show();
	        });
	        $(this).mouseleave(function() {
	            $("#" + _showDiv).hide();
	        });

	    });
	}

 2、页面引入

<!--浮动产品模板开始-->
	<div id="div_Content" class="jy_recom div_style"><a href="#" target="_blank"><img src="img/wechart.jpg" alt="" width="206" height="262" /></a>
	</div>
	<!--浮动产品模板结束-->