今天要说的就是通过控制其大小来实现元素的显隐，原理：为其注册鼠标移入、移出的事件，当鼠标移出对象范围，将其宽度设为1，当鼠标再次移入该对象，将其宽度还原。很简单，我们一起看看吧！
隐藏状态：
左边那一条窄线就是隐藏以后的悬浮框。
显示状态：
当鼠标滑到左边的悬浮框上，悬浮框就又显示出来了。
CSS样式：
复制代码 代码如下:
* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px; padding:0px; overflow:auto; }
.line0 { line-height:20px; background-color:lightyellow; padding:0px 15px; }
.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
.w { position:absolute; lift:10px; top:10px; width:1px; height:300px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
.winBody { height:270px; width:160px; overflow-x:auto; overflow-y:auto; border-top:1px inset blue; padding:10px; background-color:white; }
JS代码：
复制代码 代码如下:
HTML代码：
复制代码 代码如下:
学生信息
学号：
姓名：
学院：
专业：
班级：
用悬浮框来显示一些信息，当需要看的时候，指向它，它就会乖乖的出来，很方便；当不需要的时候鼠标移开，它又会很识趣的自己默默离开。虽然很简单，但是却有不错的用户体验，做出让用户用着舒服的东西，是我们不变的追求。
