<div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')">鼠标放上去1</a></div> <div id="div1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')" style="display: none; width: 218px; font-size: 12px; color: #333; border: 1px solid #FF6600; border-top: none; margin: 0px; background-color: #fff; position: absolute"> <ul> <li><a href="#">运动</a></li> <li><a href="#">钟表</a></li> <li><a href="#">男装</a></li> <li><a href="#">钻石饰品</a></li> <li><a href="#">女装</a></li> <li><a href="#">金银投资</a></li> </ul> </div> <script> var ishide = 0;//判断是否需要隐藏div function show(id1, id2) { var obj1 = $("#" + id1 + ""); var obj2 = $("#" + id2 + ""); if (ishide == 0) { ishide = 1; } $(obj2).css("display", "block"); //var X = obj1.offset().top; //var Y = obj1.offset().left; //$(obj2).offset({ top: X + 20, left: Y }) //$(obj2).css("left", X); //$(obj2).css("top", Y + 10); } function hide(id2) { ishide = 0; setTimeout(hide2, 400, id2); } function hide2(id2) { var obj2 = $("#" + id2 + ""); if (ishide == 0) { $(obj2).css("display", "none"); } } </script>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script>
function show(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display","block");
$(objDiv).css("left", event.clientX);
$(objDiv).css("top", event.clientY + 10);
}
function hide(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display", "none");
}
</script>
<!--http://www.ablanxue.com/prone_3421_1.html-->
<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">
提示1效果
</div>
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;">
提示2效果
</div>
<a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
<br><br><br><br><br>
<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>