帮忙看看啊

http://bbs.zqzhibo.com/这个网站上“最新帖子”，“最新回复”列表里鼠标放上去显示信息的效果是用JS怎么做啊？还有听说用纯CSS也可以做到的吗。

解决方案 »

  1.   

    其余效果自己加就行了
    <head>
        <title></title>    <script src="js/jquery-1.4.4.js" type="text/javascript"></script>    <script type="text/javascript">
            function initEvent() {
                var div = document.getElementById("d1");
                var tipdiv = document.getElementById("tip");
                div.onmouseover = function() {
                    tipdiv.style.display = "";
                };
                div.onmouseout = function() {
                    tipdiv.style.display = "none";
                };
            }
        </script></head>
    <body onload="initEvent()">
        <div id="d1">
            一个帖子</div>
        <div id="tip" style="display: none">
            提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示</div>
    </body>
      

  2.   

    <head>
        <title></title>    <script type="text/javascript">
            function initEvent() {
                var div = document.getElementById("d1");
                var tipdiv = document.getElementById("tip");
                div.onmouseover = function() {
                    tipdiv.style.display = "block";
                };
                div.onmouseout = function() {
                    tipdiv.style.display = "none";
                };
            }
        </script></head>
    <body onload="initEvent()">
        <div id="d1">
            一个帖子</div>
        <div id="tip" style="display: none">
            提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示</div>
    </body>
      

  3.   

    纯CSS
    http://www.doyoe.com/model/xhtmlcss/menu/menu1/2.htm
      

  4.   


    这种改起来好复杂哦。它那个网站是用JS的吗？onmouseover之类的好像有点卡。
      

  5.   

    跟CSDN差不多了，当鼠标移动到上面的时候就弹出一个div,用CSS也能做.看你喜欢怎么样做了
      

  6.   

    纯CSS也可以的，就是图像地图啊
      

  7.   


    有啊,你就在CSDN中你当前的页面上把鼠标放到任何一个用户的头像上,不是弹出来用户信息了吗?
      

  8.   

    给你一个CSS做的吧<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title><style type="text/css">
    .a1{ width:152px;height:158px;float:left;margin:0 8px 0 0;}
    .a1 a{ text-decoration:none;}
    .b1{
    position:relative; /*这个是关键*/
    z-index:2;
    }
    .b1:hover{z-index:3;background:none; }
    .b1 div{display: none;}
    .b1:hover div{ 
    display:block;
    position:absolute;
    top:0px;
    left:100px;
    width:120px;
    border:1px solid #333333;
    background-color:#FFFFCC;
    padding:0px;
    color:black;
    padding:10px;
    }
    .a2{ font:13px/22px "宋体"; text-align:left;}
    </style>
    </head>
    <body>
    <div class="a1" align="center">
    <a class="b1" href="#">
        测试弹出层
    <div class="a2">
        <table border="0">
       <tr>
          <td>姓名:</td>
      <td>张三</td>
       </tr>
       <tr>
          <td>性别:</td>
      <td>男</td>
       </tr>
       <tr>
          <td>年龄:</td>
      <td>23</td>
       </tr>
    </table>
     </div>
    </a>
    </div>
    </body>
    </html>
      

  9.   

    我也来个用到了jQuery
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
    #tooltip{
    border-style:solid;
    border-width:"1px";
    background-color:"#FFFFCC";
    font-size:"12px"
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $(document).ready(function(){
    var y = 20;
    var x = 10;
    $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    // 清除自带的提示
    this.title = "";
    var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
    // 把提示内容追加到文d档中
    $("body").append(tooltip);
    // 设置提示层显示位置
    $("#tooltip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"}).show();
    }).mouseout(function(e){
    // 还原自带的提示
    this.title = this.myTitle;
    $("#tooltip").remove();
    }).mousemove(function(e){// 添加移动跟随
    $("#tooltip").css({"position":"absolute","top":e.pageY+y+"px","left":e.pageX+x+"px"});
    })


    })
    //-->
    </SCRIPT>
     </HEAD> <BODY>
      <p><a a href="#" title="这是我的超链接提示1" class="tooltip">提示11111111111111111111111111111111111</a></p>
      <p><a a href="#" title="这是我的超链接提示2" class="tooltip">提示2</a></p>
      <p><a a href="#" title="自带的提示">自带的提示</a></p>
     </BODY>
    </HTML>
      

  10.   

    <锋利的jQuery>里面有说明
      

  11.   

    还行啊,不过用jquery要简单的多