js-鼠标经过或点击在鼠标当前位置弹出DIV层

最近参考网上一些免费资源，做了一个js特效。效果如题：

首先设置你要弹出的DIV层样式：

 

代码

1 <style type="text/css">
2 #blockCity{ position:absolute;font-size:9pt; background-color:#FFFFCC; padding:5px; border:1px solid #F5C66B;line-height:160%; width:300px; display:none;}
3 #blockCity a
4 {
5 color:#000000;
6 font-size:9pt;
7 text-decoration:none;
8 }
9 #blockCity a:hover
10 {
11 font-size:10pt;
12 border-bottom:dashed 1px #000000;
13 }
14 #blockCity table
15 {
16 border:1px dotted #F5C66B;
17 }
18 #blockCity table td
19 {
20 width:40px;
21 text-algin:center;
22 }
23 </style>

 

然后：js代码

 

代码

1 <script type="text/javascript">
2 function selStation(locationid){
3 var Obj = document.getElementById("blockCity");
4 document.getElementById("blockCity").innerHTML = "";
5 for (var i=0;i < onecount; i++){
6 if (subcat[i][1] == locationid)
7 {
8 document.getElementById("blockCity").innerHTML += subcat[i][0]+"<br />";
9 document.getElementById("blockCity").style.left = event.x;
10 document.getElementById("blockCity").style.top = event.y + document.documentElement.scrollTop - 40;
11 document.getElementById("blockCity").style.display = "block";
12 }
13 }
14
15 }
16
17 function cshow(){
18 document.getElementById("blockCity").style.display="block";
19 }
20 function chide(){
21 document.getElementById("blockCity").style.display="none";
22 }
23 </script>

 

 

<script type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
subcat[0]=new Array('你要显示的内容','类似ID，通过这个变量来进行查找');
onecount=1;
</script>

 

最后就是前台调用了：

 

1 <a href="#" onmouseover="selStation('类似ID,与上面js对应');" onmouseout="chide();" >查看我隐藏的DIV</a>

 

 

 

 

 

转载于:https://www.cnblogs.com/mrguo/archive/2010/03/16/1687182.html