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 浏览器有偏差,解决方法尚未有。