睢闫网络为您打造全面营销系统,营销网络建设第一品牌!
验证码: 看不清?点击更换
注册
签到 网页翻译为英文
1823-8012-605

营销型网络系统 顶级核心团队

让传统企业获得更多的订单和询盘!

您现在所在的位置:主页 > 网站建设

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

时间:2015-10-04 19:14    来源:睢闫网络传媒   访问人数:  业务咨询    在线下单

这是一个非常简单的例子,主要利用了元素 hover 高亮效果的特性创建收缩面板。“hover”的意思就是用户鼠标移上某个元素时,该元素会产生高亮的效果。所谓“高亮”,仅仅是我们想定义的这样子。具体是什么效果随便我们而定。CSS 选择符的写法为“ 元素: hover { ……(欲变化的样式)……}。常常使用 hover 的一个地方就是 a 元素,也就是定义鼠标移至 a 元素的样式。把 hover 推广到其他非 a 元素当然也可以。我们这个收缩面板,主要就是使用到了这个 hover 会动态变化的特性。

单纯 hover 不足以显示其强大,而且 hover 可在任意层次中指定,例如“父元素 : hover   子元素”,即仅对子元素响应这个事件。注意我们这这里提到了事件的概念,但实际编码中无须写半句 JavaScript,完全纯 CSS 搞定。

讲那么多,还是看看实际的例子,假设,客户提出像 163 这样的需求,在顶部导航添加 登录 按钮,无须点击,鼠标移到按钮上即刻在下方出现登录的面板。

我不清楚 163 通过什么途径去实现。而我的原理很简单,一句话可以讲清楚。我们把“父元素”当作按钮,当鼠标移至那按钮上面,即出现本来隐藏着的面板,那么,那个面板就是子元素了。至于所谓“收缩”效果,对应的便是 CSS 的 display 属性,block/none。(下面的是 LESS 样式)

 

[css] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. // 登录面板 和忘记密码  
  2. #loginBtn, .forgetPasswordBtn{  
  3.     positionrelative;  
  4.     &:hover #loginPanel, #loginPanel:hover, &:hover .forgetPasswordPanel, .forgetPasswordPanel:hover{ // 因为有“登录”和“找回密码”,所以写 2x2个,其中有一组 for 面板 hover 的。  
  5.         displayblock;  
  6.     }  
  7.     #loginPanel, .forgetPasswordPanel{  
  8.         displaynone;  // 开始是隐藏的  
  9.         positionabsolute;  
  10.         top:24px;  
  11.         top:24px;  
  12.         left: 0;  
  13.         background-color#f5f5f5;  
  14.         border1px solid lightgray;  
  15.         border-top:0;  
  16.         padding5px;  
  17.         width:230px;  
  18.     }  
  19.     .forgetPasswordPanel{  
  20.         left: inherit;  
  21.         right: 0;  
  22.   
  23.     }  
  24. }  

现在可以显示出面板了。但光有按钮的 hover 的话还不能满足需求之设计,还要让面板本身不能消失,那么,如此类推,让面板加入 hover:#loginPanel:hover。

总之,关键的点如下:

  • 利用 hover 产生类似“鼠标事件”的作用
  • 要显示的内容在按钮元素包裹下
  • 显示内容本身也要 hover

另外注意按钮与面板之间的衔接,一定要密。不然鼠标从按钮移下到面板的时候,如果出现空隙,将被视为不连续的 mouseout 事件,不属 hover 定义范围内,那么面板将会隐藏。

我们完成的效果如下。IE7/IE7+浏览器通过。IE6不支持的原因怀疑是 hover 支持不良的缘故。

如果要制作如上图无缝 border 的效果,就需要指定 top 属性覆盖 1px~2px,IE 浏览器有偏差,解决方法尚未有。

下载此文章
联系方式

中国 · 睢县 · 建设路天湖城1005号

公司: 睢闫网络传媒有限公司

电话:1823-8012-605

邮箱:732541231@qq.com

QQ在线咨询

商务服务或业务咨询请点击以下QQ头像

网站建设-点击洽谈

数据库系统-点击洽谈

其他项目-点击洽谈

至电顾问需求或技术支持

需要做项目或需要技术支持业务请来电,谢谢!

18238012605 -郑经理

18336092044 -李经理

18671257743 -艾经理

告诉我们您的需求

在线填写需求,我们将尽快为您答疑解惑。

业务咨询QQ:732541231

售后服务QQ:732541231

电话:1823-8012-605

工作时间 9:00 ~ 18:00

工作日(周一至周五)

我们将在1个小时内回复,资料会保密处理。