怎么样实现这个效果

http://www.kaoyanmeng.com/Item/687608.aspx
怎么实现  右边  药理学专业数据调查  鼠标移上去   窗体变大

解决方案 »

  1.   

    看看这个你就知道了:调用:
    <div class="mid_02_right_cont" onmouseover="this.className='mid_02_right_cont_on';aon();" onmouseout="this.className='mid_02_right_cont_off';aoff();">CSS 内容:
    .mid_02_right_cont{ width:628px; float:left;border:1px solid #0080FF;margin-top:10px; height:90px; overflow:hidden;}
    .mid_02_right_cont_on{  width:628px; height:auto; background:#E2F1FA;border:1px solid #0080FF; padding: 0px; margin-top:10px; position:absolute; overflow:hidden; z-index:999;}
    .mid_02_right_cont_off{ width:628px; float:left;border:1px solid #0080FF;margin-top:10px; height:90px;overflow:hidden;}
      

  2.   

    $(this).mouseover(function(){this.css({......})});
      

  3.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <style>
    #tb{
       height:100px;
       overflow:hidden;
    }
    .test1{
       height:100px;
       overflow:hidden;
    }
    .test2{
       height:auto;
       overflow:hidden;
       z-index:999;
       position:absolute;
    }
    </style>
    </head><body>
    <div id="cc">
      <table border="1" id="tb" height="20%" style="overflow:hidden">
        <tr><td>ssdsd</td><td>wew</td></tr>
        <tr><td>ewewe</td><td>eweww</td></tr>  </table>
      <div>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
      </div>
    </div>
    <script type="text/javascript">
      var zt=document.getElementById("cc");
      zt.onmouseover=function(){
         this.className="test2";
      }
      zt.onmouseout=function(){
         this.className="test1";
      }
    </script>
    </body>
    </html>
      

  4.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <style>
    #tb{
       height:100px;
       overflow:hidden;
    }
    .test1{
       height:100px;
       overflow:hidden;
    }
    .test2{
       height:auto;
       overflow:hidden;
       z-index:999;
       position:absolute;
    }
    </style>
    </head><body>
    <div id="cc">
      <table border="1" id="tb" height="20%" style="overflow:hidden">
        <tr><td>ssdsd</td><td>wew</td></tr>
        <tr><td>ewewe</td><td>eweww</td></tr>  </table>
      <div>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
          <p>dweteg</p>
      </div>
    </div>
    <script type="text/javascript">
      var zt=document.getElementById("cc");
      zt.onmouseover=function(){
         this.className="test2";
      }
      zt.onmouseout=function(){
         this.className="test1";
      }
    </script>
    </body>
    </html>
      

  5.   

    顺便说一句，在CSS中都加上合适的宽度。就更好了。