开发工具与关键技术：DW JavaScript撰写时间：2月15日
在css中可以用伪类hover来实现鼠标的移入移出效果，而在JS中也可以用鼠标移入onmouseover事件和鼠标移出onmouseout事件来实现。当然，两者肯定有区别的。下面我只介绍用JS来写的方法，html的结构布局和css的样式代码如下：
@charset "utf-8";/* CSS Document */.box{width: 70px;height: 27px;margin: 0 auto;}.box button{padding: 2px 20px 2px 7px;background: url(../Images/ckjihua.gif) left top;border: none;color: #fff;position: relative;}.box button i{border: 5px solid #fff;border-color: #fff transparent transparent transparent;width: 0px;height: 0px;position: absolute;top: 9px;right: 3px;}.box button i.sq{border-color: transparent transparent #fff transparent;top: 3px;}#tabulation{width: 300px;height: 260px;margin: 0 auto;display: none;}.bos{width: 300px;height: 260px;border: 1px solid #13DFE9;color: #C88D8E;}.bos th,.bos td{text-align: center;}.bos td{border-top: 1px solid #13DFE9;}.bos tr:nth-child(even){background: #13DFE9;}
最后就是鼠标移入时隐藏的表格显示出来和鼠标移出时表格隐藏的JS代码：
再看看效果图：
查看和收起的按钮也是通过JS的innerHTML来改变按钮的内容以及标签实现的。当鼠标移入前按钮的内容为查看、三角形向下；鼠标移入后按钮的内容变成收起、三角形向上；鼠标移出后按钮又会变回原来的样子。
