利用 hover 伪类创建纯 CSS 收缩面板

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

©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页