hover弹出层
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.circle{
border:1px solid blue;}
</style>
<script src="jquery-1.2.5.pack.js"></script>
<script>
$(document).ready(function(){
$("#wcg").hover(function(){
$(this).addClass("circle");
var e=event.srcElement;
var t = e.offsetTop;
var l = e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
$("#mDiv").css("left",l+200);
$("#mDiv").css("top",t+50);
$("#mDiv").show();
},function(){
$(this).removeClass("circle");
$("#mDiv").hide();
});
});
</script>
</head>
<body>
<p> </p>
<p>oiuoiupuipypui</p>
<p>sdfasdfas</p>
<p>dfsdf</p>
<p><img src="wcg.jpg" width="214" height="214" id="wcg"/>
</p>
<div id="mDiv" style=" display:none; width:200px; height:100px; position:absolute; overflow:auto; background-color:#33CC66; filter:Alpha(pacity=80);">
帅吧,哈哈哈~~
</div>
</body>
</html>
