jquery 弹出层定位到相应位置 内容关键字提示

代码如下 拷贝即可看到效果

<!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>
<script type="text/javascript" src="http://www.biztae.com/website/js/jquery-1.4.2-development.js"></script>
<style type="text/css">
.showbox
{
display: none;
260px;
position: absolute;
background-color: White;
border: solid 1px #cad9ea;
}
.showbox ul
{
margin: 0px;
padding: 0px;
padding: 5px;
}
.showbox ul li
{
list-style: none;
line-height: 1.8em;
}

.showbox li.more
{
padding-right: 10px;
text-align: right;
}
.showbox li a
{
display: block;
}
.showbox li a:hover
{
background-color: #f0f3f9;
color: #ff5500;
}
</style>
</head>
<body>
<div class="link">
中新网11月14日报道:中新网金融频道从央行获悉, <a id='aa' href="#" onmouseover="display()" onmouseout="disappear()">
懒人建站—鼠标划过来试试</a>
<div class="showbox">
<ul>
<li><a href="#" target="_blank">第一条</a></li>
<li><a href="#" target="_blank">第二条</a></li>
<li><a href="#" target="_blank">第三条</a></li>
<li><a href="#" target="_blank">第四条</a></li>
<li><a href="#" target="_blank">第五条</a></li>
<li class="more"><a href="#" target="_blank">更多...</a></li>
</ul>
</div>
据中国人民银行授权中国外汇交易中心公布的消息,2011年11月16日银行间外汇市场人民币汇率中间价为:1美元对人民币6.3509元,1欧元对人民币8.5813元,100日元对人民币8.2388元,1港元对人民币0.81601元,1英镑对人民币10.0401元,人民币1元对0.50610林吉特,人民币1元对4.8350俄罗斯卢布。(中新网金融频道)
中新网11月14日报道:中新网金融频道从央行获悉,据中国人民
<a href="#" id='bb' onmouseover="display1()" onmouseout="disappear1()">
123</a>
<div class="showbox">
<ul>
<li><a href="#" target="_blank">第一条1</a></li>
<li><a href="#" target="_blank">第二条1</a></li>
<li><a href="#" target="_blank">第三条2</a></li>
<li><a href="#" target="_blank">第四条3</a></li>
<li><a href="#" target="_blank">第五条4</a></li>
<li class="more"><a href="#" target="_blank">更多...</a></li>
</ul>
</div>
银行授权中国外汇交易中心公布的消息,2011年11月16日银行间外汇市场人民币汇率中间价为:1美元对人民币6.3509元,1欧元对人民币8.5813元,100日元对人民币8.2388元,1港元对人民
<script type="text/javascript" language="javascript">
$("#aa").mouseover(function () {
$(this).next("div").show();
var offset = $(this).offset();
var height = $(this).height();
$(this).next("div").css("top", offset.top + height);
$(this).next("div").css("left", offset.left);
});
$("#aa").mouseout(function () {
$(this).next("div").hide();
});
$("#aa").next("div").mouseover(function () {
$(this).show();
});
$("#aa").next("div").mouseout(function () {
$(this).hide();
});


$("#bb").mouseover(function () {
$(this).next("div").show();
var offset = $(this).offset();
var height = $(this).height();
$(this).next("div").css("top", offset.top + height);
$(this).next("div").css("left", offset.left);
});
$("#bb").mouseout(function () {
$(this).next("div").hide();
});
$("#bb").next("div").mouseover(function () {
$(this).show();
});
$("#bb").next("div").mouseout(function () {
$(this).hide();
});
</script>
</div>
</body>
</html>

海贼王

原文地址:https://www.cnblogs.com/wrhming/p/2253866.html