如何实现这样的弹出层效果，高手请进~~~

鼠标经过时，弹出这样的层，求思路，求demo。谢谢各位大大！

解决方案 »

  1.   

    新建div，然后锁定位置，赋值（文本），修改背景（background-image），然后onmouseover里触发显示不知道楼主懂了没？
      

  2.   

    背景是DIV的背景，该为如图的对话框就可以是吗。我大概明白意思~~~动手试下，哪位大大有Demo。类似的。
      

  3.   

    http://craigsworks.com/projects/qtip/demos/如何？
      

  4.   

    在图片的下面隐藏一个div 当鼠标移上去的时候让其固定显示，用css 控制下 应该就可以了吧？
      

  5.   

    需要制作4张弹出层的图片，每张图片分别把箭头指向对应的图片，这个你CSS调整一下就好了啊，然后鼠标mouseover到哪张图片，对应的弹出层就显示出来
      

  6.   

    参考：
    <html>
    <head>
        <title>Web前端效果 - 当鼠标移至用户名时弹出层显示其详细信息</title>
        <style type="text/css">
          /* 整体布局 */
          body { text-align:center; }
          #main { margin:0 auto; width:970px; height:auto; text-align:left; }
          #main div.userlist { width:100px; height:35px; border:solid 1px gray; position:relative; }
          /* 弹出层样式 */
          div.box 
          {  
           width:350px; 
           height:200px; 
           border:solid 2px blue; 
           background-color:White; 
           position:absolute; 
           top:35px; 
           left:0px; 
           z-index:100;               
           display:none;
          }    
          div.box span { line-height:2.0em; font-size:12px; margin:10px 10px 10px 10px; display:block;}
          div.boxshadow { width:350px; height:200px; background-color:Gray; position:absolute; top:50px; left:15px; z-index:99; display:none; }
        </style>
        <script src="http://hb.snzo.cn/new/js/jquery-1.3.1.js" type="text/javascript"></script>
        <script type="text/javascript">
          function boxShow()
          {
            $("div.box,div.boxshadow").show();
          }
          $(document).ready(function(){
            $("div.box").mouseout(function(event){
              var e = window.event || event;  
              var s = e.toElement || e.relatedTarget;     
              if(document.all){     
                  if( !this.contains(s) ){     
                     $("div.box,div.boxshadow").hide();
                  }     
                  }else{     
                     var res= this.compareDocumentPosition(s) ;       
                     if( ! ( res == 20 || res == 0) ){        
                       $("div.box,div.boxshadow").hide();
                   }       
                }
            });
          });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="main">
           <div class="userlist">       
             <a href="javascript:void(0);" onmouseover="boxShow();">yuxh</a>
             <div class="box"><span>yuxh <br />等级：初级<br />注册时间：2011-08-25<br />备注：<br /></span></div>
             <div class="boxshadow"></div>
           </div>
        </div>
        </form>
    </body>
    </html>