通过HTML、CSS、JSP来实现
1、首先确定通过div嵌套来实现：
大的div里放默认显示的一层，限制其总层次高，设置超出部分隐藏
小的div里放鼠标移过去时显示的一层：3行1列的表格
1.1、什么场景的实现通过在单元格内的嵌套div实现
2.通过CSS来设置div和table的样式
3.通过JSP来设置方法：onmouseover时显示全部内容
onmouseout时只显示大的一层
4.通过id来调用样式，通过事件来调用方法
<!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 type="text/css"> // 放在head里 * { margin:0px; padding:0px;} #aa { height: 40px; 90px; top: 50px; left: 200px; background-color:#CCC; position: absolute; overflow: hidden; text-align: center; line-height: 40px; } #bb { height:120px; 90px; top:40px; left:0px; background-color:#CCC; position:absolute; } table //直接写table 不是#table { border:0px solid #CCC; height:120px; 90px; text-align:center; vertical-align:middle; }
#changjing
{
height:40px;
100px;
top:0px;
left:0px;
position:absolute;
overflow:hidden;
}
#fen
{
background-color:#C9F;
height:40px;
100px;
top:0px;
left:100px;
position:absolute;
}
</style> </head> <body> <div id="aa" onmouseover="over()" onmouseout="out()">新闻动态 /*修改层的颜色要在这里面的style修改*/ <div id="bb"> <table cellpadding="0" cellspacing="0">
<tr>
<td height="40" width="100">
<div id="changjing" onmouseover="over1()" onmouseout="out1()">场景<div id="fen">什么场景</div></div>
</td>
</tr>
<tr><td>活动</td></tr> <tr><td>杂谈</td></tr> </table> </div></div> </body> </html> <script> function over() { var a=document.getElementById("aa"); a.setAttribute("style","overflow:visible;background-color:#3FC"); } function out() { var a=document.getElementById("aa"); a.setAttribute("style", "overflow:hidden;background-color:#CCC"); }
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");
}
</script>
默认时：
鼠标在上面时：
鼠标点击场景
鼠标移开时