通过HTML、CSS、JSP来实现

1、首先确定通过div嵌套来实现：

大的div里放默认显示的一层，限制其总层次高，设置超出部分隐藏

小的div里放鼠标移过去时显示的一层：3行1列的表格

1.1、什么场景的实现通过在单元格内的嵌套div实现

2.通过CSS来设置div和table的样式

3.通过JSP来设置方法：onmouseover时显示全部内容

                              onmouseout时只显示大的一层

4.通过id来调用样式，通过事件来调用方法

 #changjing

 {

 height:40px;

 width:100px;

 top:0px;

 left:0px;

 position:absolute;

 overflow:hidden;

 }

 #fen

 {

 background-color:#C9F;

 height:40px;

 width:100px;

 top:0px;

 left:100px;

 position:absolute;

}

     
      新闻动态 /*修改层的颜色要在这里面的style修改*/
      
       
      
     

<tr>

<td height="40" width="100">

<div id="changjing" οnmοuseοver="over1()" οnmοuseοut="out1()">场景<div id="fen">什么场景</div></div>

</td>

</tr>

活动杂谈     

function over1()

{

var a=document.getElementById("changjing");

a.setAttribute("style","overflow:visible;background-color:#3FC");

}

function out1()

{

var a=document.getElementById("changjing");

a.setAttribute("style",

"overflow:hidden;background-color:#CCC");

}

默认时：

鼠标在上面时：

鼠标点击场景

 

鼠标移开时