SVN 源码/例子：http://naturaljs.googlecode.com/svn/trunk/demo/widgets/hoverTab.htm
这是一个非常简单的例子，主要利用了元素 hover 高亮效果的特性创建收缩面板。“hover”的意思就是用户鼠标移上某个元素时，该元素会产生高亮的效果。所谓“高亮”，仅仅是我们想定义的这样子。具体是什么效果随便我们而定。CSS 选择符的写法为“ 元素: hover { ……（欲变化的样式）……}。常常使用 hover 的一个地方就是 a 元素，也就是定义鼠标移至 a 元素的样式。把 hover 推广到其他非 a 元素当然也可以。我们这个收缩面板，主要就是使用到了这个 hover 会动态变化的特性。
单纯 hover 不足以显示其强大，而且 hover 可在任意层次中指定，例如“父元素 : hover 子元素”，即仅对子元素响应这个事件。注意我们这这里提到了事件的概念，但实际编码中无须写半句 JavaScript，完全纯 CSS 搞定。
讲那么多，还是看看实际的例子，假设，客户提出像 163 这样的需求，在顶部导航添加 登录 按钮，无须点击，鼠标移到按钮上即刻在下方出现登录的面板。
我不清楚 163 通过什么途径去实现。而我的原理很简单，一句话可以讲清楚。我们把“父元素”当作按钮，当鼠标移至那按钮上面，即出现本来隐藏着的面板，那么，那个面板就是子元素了。至于所谓“收缩”效果，对应的便是 CSS 的 display 属性，block/none。（下面的是 LESS 样式）
// 登录面板 和忘记密码
#loginBtn, .forgetPasswordBtn{
position: relative;
&:hover #loginPanel, #loginPanel:hover, &:hover .forgetPasswordPanel, .forgetPasswordPanel:hover{ // 因为有“登录”和“找回密码”，所以写 2x2个，其中有一组 for 面板 hover 的。
display: block;
}
#loginPanel, .forgetPasswordPanel{
display: none; // 开始是隐藏的
position: absolute;
top:24px;
top:24px;
left: 0;
background-color: #f5f5f5;
border: 1px solid lightgray;
border-top:0;
padding: 5px;
width:230px;
}
.forgetPasswordPanel{
left: inherit;
right: 0;
}
}
现在可以显示出面板了。但光有按钮的 hover 的话还不能满足需求之设计，还要让面板本身不能消失，那么，如此类推，让面板加入 hover：#loginPanel:hover。
总之，关键的点如下：
- 利用 hover 产生类似“鼠标事件”的作用
- 要显示的内容在按钮元素包裹下
- 显示内容本身也要 hover
另外注意按钮与面板之间的衔接，一定要密。不然鼠标从按钮移下到面板的时候，如果出现空隙，将被视为不连续的 mouseout 事件，不属 hover 定义范围内，那么面板将会隐藏。
SVN 源码/例子：http://naturaljs.googlecode.com/svn/trunk/demo/widgets/hoverTab.htm
我们完成的效果如下。IE7/IE7+浏览器通过。IE6不支持的原因怀疑是 hover 支持不良的缘故。
如果要制作如上图无缝 border 的效果，就需要指定 top 属性覆盖 1px~2px，IE 浏览器有偏差，解决方法尚未有。
