div问题

Question

需要用到div高级特性，效果就像大致是这样的：网页某个位置，当鼠标移动到上面的时候，会出现一个矩形，里面有一些信息，背景是米黄色，带关闭标签，里面含有超级连接等。请问怎样实现，最好有代码！分数可以追加！

Answer 1

function show(divName)
 {
  //var event=window.event||arguments.callee.caller.arguments[0];
  //如果window.event==null，则取函数的第一个参数...
   
  //var event=window.event||event;
  //var event=event||window.event;
   document.getElementById(divName).style.display="";
  //设置div2的style属性的display值等于空，显示
  // alert(window.screen.width);
  // document.getElementById(divName).style.left=event.clientX+"px";
  
  //window.screen.width;
  if (window.screen.width-(document.documentElement.scrollLeft+event.clientX)<300)
  {
   document.getElementById(divName).style.left=document.documentElement.scrollLeft+event.clientX-300+"px";
  }
  else
  {
   document.getElementById(divName).style.left=document.documentElement.scrollLeft+event.clientX+"px";
  }
  //设置div2的style属性的left的值为正文区域的X坐标值+单位px
  // document.getElementById(divName).style.top=event.clientY+"px";
  document.getElementById(divName).style.top=document.documentElement.scrollTop+event.clientY+"px";
  //设置div2的style属性的right的值为正文区域的Y坐标值+单位px
 }
 function hidden(divName)
 {
  document.getElementById(divName).style.display="none";
  //设置div2的style属性的display的值为空，隐藏
 }
 
 function show_div2(divName)
 {
  document.getElementById(divName).style.display="";
 }
 function hidden_div2(divName)
 {
  document.getElementById(divName).style.display="none";
  //设置div2的style属性的display的值为空，隐藏
 } 

Answer 2

楼上的有点复杂
我给你说一下我的思路：先在你的网页任何地方放一个你要弹出的showDiv,它的style是style.display="none"，这样，一开始它是没有的，不占位置的，同时，这个层就可以放你任何想要放的东西，如超链接和米黄色和消失按钮 cancle在你说的网页位置里放一个onMouseOverDIV，它的位置可以用相对或者绝对位置来确定给onMouseOverDIV添加onMouseOver事件写一个函数响应onMouseOver事件,设置onMouseOverDIV的属性document.getElementById(onMouseOverDIV).style.display="";这样它就显示出来了。上面div里的cancle事件就是document.getElementById(onMouseOverDIV).style.display="none"；这样就ok了

Answer 3

写一个函数响应onMouseOver事件,设置onMouseOverDIV的属性document.getElementById(showDiv).style.display="";这样它就显示出来了。 上面div里的cancle事件就是document.getElementById(showDiv).style.display="none"； 

Answer 4

 onMouseOver（event）      
 showDiv.style.left = event.clientX
 showDiv.style.pixelTop = event.clientY
这样还可以让你要显示的层跟随你的鼠标位置

Answer 5

其实就是一浮动层
onmouseover函数触发

Answer 6

<style type="text/css">
.divOnMouseOver{ width :200px; height :200px; border:1px solid Gray;}
.divShow       { width :100px; height :100px; background-color :Green;}
</style> <script type ="text/jscript" >
function onMouseOver(){
    idDivShow = document.getElementById("divShow");
    if (idDivShow.style.display == "none")
     idDivShow.style.display = ""; 
    else idDivShow.style.display = "none";
}
</script><div id="divOnMouseOver"  onmouseover ="onMouseOver()"  class ="divOnMouseOver " ></div>
<div id="divShow"         style ="display :none"   class="divShow">
<a href ="http://www.g.cn">i love google</a>
<input id="cancel" type="button"  value="取消" onclick ="onMouseOver()" />
</div>注释就不用写了吧